如何在react-google-maps中获取地图[getZoom()]的当前缩放？

Question

我想在 react-google-maps 中获取我的地图的当前缩放级别，就像我们在简单的 google 地图 api 中使用 getZoom() 函数所做的那样。如何在 react-google-maps 中做到这一点？

我看了几个答案，但 none 个对我有用。

import React from "react"
import {
  GoogleMap,
  Marker,
  withGoogleMap,
  withScriptjs,
} from "react-google-maps"


const Map = () => {
  return (
    <GoogleMap
      defaultZoom={15}
      defaultCenter={{ lat: lat, lng: lng }}
    >
      <Marker position={{ lat: lat, lng: lng }} />
    </GoogleMap>
  )
}

const WrappedMap = withScriptjs(withGoogleMap(Map))

const Index = () => {
  return (
    <Layout>
      <WrappedMap
        googleMapURL={`https://maps.googleapis.com/maps/api/js? 
        key=my_key&v=3.exp&libraries=geometry,drawing,places`}
        loadingElement={<Loading />}
        containerElement={<div style={{ height: `400px` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    </Layout>
  )
}

export default Index

如何为上面显示的示例获取缩放。

Answer 1

react-google-maps/api

从下面复制基本模板，确保为 lat、lng 和 apiKey[= 赋值28=]

“@react-google-maps/api”中的 GoogleMap 组件采用函数类型的属性 onLoad。此 onLoad 函数采用默认参数，即 map.
的当前实例
我在这里使用反应挂钩来设置我的功能组件中的状态，您也可以使用基于 class 的组件。只是当前地图实例的setState。

import React from "react" import { GoogleMap, LoadScript } from "@react-google-maps/api" const apikey = "YOUR_API_KEY_HERE" // lat and lng are float numbers not string const lat = lat_value const lng = lng_value const Map = props => { const [map, setMap] = React.useState(null) return ( <LoadScript id="script-loader" googleMapsApiKey={apikey}> <GoogleMap // set the state with the current instance of map. onLoad={map => { setMap(map) }} mapContainerStyle={{ height: "400px", width: "800px", }} zoom={16} center={{ lat: lat, lng: lng, }} id="example-map" // here onZoomChanged we are accessing the current zoom value from our map //instance which is stored in the state onZoomChanged={() => { console.log(map.getZoom()) }} > ...Your map components </GoogleMap> </LoadScript> ) } export default Map

这应该会在您更改地图缩放比例后立即在控制台中记录当前缩放值。

Answer 2

来自 react-google-maps 的

GoogleMap 组件公开了 onZoomChanged 方法，该方法对应于本地 Google 地图 zoom_changed 事件，一旦地图的缩放级别发生变化就会触发

这是一个如何在 WrappedMap 组件中检索当前缩放的示例：

const Map = ({center,zoom}) => {

  function handleZoomChanged(){
    console.log(this.getZoom()) //this refers to Google Map instance
  }


  return (
    <GoogleMap defaultZoom={zoom} defaultCenter={center} onZoomChanged={handleZoomChanged} >
      <Marker position={center} />
    </GoogleMap>
  );
};

另一种选择是通过 onZoomChanged prop:

从子组件传递当前缩放

const Map = ({ center, zoom, onZoomChanged }) => {
  function handleZoomChanged() {
    onZoomChanged(this.getZoom()); //current zoom
  }

  return (
    <GoogleMap
      defaultZoom={zoom}
      defaultCenter={center}
      onZoomChanged={handleZoomChanged}
    >
      <Marker position={center} />
    </GoogleMap>
  );
};

然后在父组件中引入currentZoom状态来存储当前缩放级别：

const App = () => {

  const [currentZoom, setCurrentZoom] = useState(5);//default

  //print current Map zoom on button click
  function handleClick() {
    console.log(currentZoom);
  }

  function handleZoomChanged(newZoom) {
    setCurrentZoom(newZoom);
  }

  return (
    <div>
      <button onClick={handleClick}>Get Zoom</button>
      <Map
        googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyDurZQBXjtSzKeieXwtFeGe-jhZu-HEGQU"
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `400px` }} />}
        mapElement={<div style={{ height: `100%` }} />}
        center={{ lat: -40.4338962, lng: 166.3297536 }}
        zoom={currentZoom}
        onZoomChanged={handleZoomChanged}
      />
    </div>
  );
};

Here is a demo

如何在react-google-maps中获取地图[getZoom()]的当前缩放？

How to get the current zoom of the map [getZoom()] in react-google-maps?

reactjs

google-maps

react-google-maps