Как получить текущий масштаб карты [getZoom ()] в Reaction-google-maps? - PullRequest
Новая
       30

Как получить текущий масштаб карты [getZoom ()] в Reaction-google-maps?

1 голос
/ 20 июня 2019

Я хочу получить текущий уровень масштабирования моей карты в response-google-maps, как мы делаем в простом API-интерфейсе google map с помощью функции getZoom (). Как это сделать в реакции-гугл-картах?

Я посмотрел несколько ответов, но ни один из них не работает для меня. 

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

Как получить getZoom для показанного выше примера.

Ответы [ 2 ]

0 голосов
/ 21 июня 2019

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

Вот демоверсия

0 голосов
/ 21 июня 2019

реагировать-google-maps / api

Скопируйте базовый шаблон снизу, убедитесь, что значения широта , lng и apiKey

Компонент GoogleMap из "@act-google-maps / api" получает пропу onLoad , который имеет функцию типа.Эта onLoad функция принимает параметр по умолчанию, который является текущим экземпляром map .

. Здесь я использую реагирующие перехватчики, чтобы установить состояние в моем функциональном компоненте, который вы можететакже используйте компонент на основе классов.Просто установите состояние текущего экземпляра карты. 

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

Это должно зарегистрировать текущее значение масштабирования в консоли, как только вы измените масштаб карты.

...