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

Question

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

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

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 中的

GoogleMap 组件公开了对应于原生 Google Map zoom_changed 事件的 onZoomChanged 方法并在 map 的缩放级别更改时触发

这是一个如何在 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 属性从子组件传递当前缩放:

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