Question

我想像在简单的Google Map api中使用getZoom（）函数那样在react-google-maps中获取地图的当前缩放级别。如何在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

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

Answer 1

react-google-maps / api

从下面复制基本模板，确保为 lat ， lng 和 apiKey

提供值

“ @ react-google-maps / api”中的 GoogleMap 组件采用类型为功能的道具 onLoad 。此 onLoad 函数采用默认参数，它是地图的当前实例。

我在这里使用react钩子在我的功能组件中设置状态，也可以使用基于类的组件。只需设置地图当前实例的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

GoogleMap中的

react-google-maps组件公开了onZoomChanged方法，该方法对应于本机Google Map 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（）]？

2 个答案: