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

Question

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

我

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

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

从下面复制基本模板，确保为纬度、液化和apiKey 提供值

来自"@react-google-maps/api"的GoogleMap组件采用一种类型函数的prop onLoad。此 onLoad 函数采用默认参数，该参数是映射的当前实例。

我在这里使用 react 钩子来设置功能组件中的状态，您也可以使用基于类的组件。只需设置映射的当前实例的状态。

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>
  );
};

另一种选择是通过 prop 从子组件传递当前缩放onZoomChanged：

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>
  );
};

这是一个演示