Как получить доступ к объекту карты с помощью React Google Maps API?

Question

Я пытаюсь получить доступ к методу getBounds карты Google, установленной в моем веб-приложении, с помощью новой библиотеки @ реагировать-google-maps / api , которая заменяет неподдерживаемую реагировать-google-maps библиотека tomchentw .

В отличие от старых реакции-google-maps, эта новая библиотека, похоже, не имеет средств для доступа к объекту карты Google какопределяется здесь. В зависимости от того, как вы пытаетесь получить доступ к объекту карты Google, вы получите одну из двух вещей:

1) просто поместив ссылку в тег, вы получите объект GoogleMap, которыйне является объектом Map и не имеет метода getBounds или чего-либо еще, что позволило бы мне получить границы карты (насколько я могу судить). Одним из его дочерних объектов является объект "Zh", описанный ниже.

2) вызов getInstance () для ссылки из пункта 1 дает вам загадочный недокументированный объект "Zh", содержащий загадочный ассортимент данных. Этот объект также присутствует как дочерний элемент GoogleMap.

Вот они в консоли: https://i.imgur.com/kGCToGv.jpg

А вот код, который сгенерировал этот вывод консоли (я использовал обратный вызов onDragEndчтобы выполнить печать после того, как я перетащил карту в приложение, поскольку попытка сразу же прочитать содержимое карты после сохранения заставило код перегружаться из-за какого-то состояния гонки):

import React from 'react'
import { LoadScript, GoogleMap, Marker } from '@react-google-maps/api'

function NewMap(props){

    let mapRef = React.createRef()

    const boundsCallBack = () => {
        console.log(mapRef.current)
        console.log(mapRef.current.getInstance())
    }

    return (
        <LoadScript googleMapsApiKey={process.env.REACT_APP_MAP_KEY}>
            <GoogleMap
                {...props.theProps}
                onDragEnd={boundsCallBack}
                ref={mapRef}
            >
                <Marker position={props.theProps.center} />
            </GoogleMap>
        </LoadScript>
    )
}

export default NewMap

Ни GoogleMap, ни Zhпохоже, предоставляет какой-либо способ доступа к реальному объекту Map или любому методу, возвращающему его жизненно важную статистику (например, его границы). Кто-нибудь знает, как получить доступ к объекту карты и / или его важной статистике с помощью этой библиотеки?

Answer 1

Вы можете получить его из обработчика события onLoad, перевести объект карты в ваше состояние и использовать его там, где вам нужно, вот так:

import React, {Component} from 'react'
import { LoadScript, GoogleMap, Marker } from '@react-google-maps/api'

class NewMap extends Component {

    state = {map: {}}

    boundsCallBack = () => {
        const {map} = this.state;
        console.log('map: ', map)
    }

    handleMapLoad = (map) => {
        this.setState((state) => ({ ...state, map }));
    }

    render () {
      return (
        <LoadScript googleMapsApiKey={process.env.REACT_APP_MAP_KEY}>
            <GoogleMap
                {...this.props.theProps}
                onDragEnd={this.boundsCallBack}
                onLoad={this.handleMapLoad}
            >
                <Marker position={this.props.theProps.center} />
            </GoogleMap>
        </LoadScript>
      )
    }
}

export default NewMap