如何使用 React Google Maps API 访问 Map 对象？

Question

我正在尝试使用新的 @react-google-maps/api 库访问安装在我的 Web 应用程序中的 Google 地图的 getBounds 方法，该库是由 tomchentw 替代不受支持的 react-google-maps 库。

与旧的 react-google-maps 不同，这个新库似乎无法访问 Google Map 对象as defined here. 根据您尝试访问 Google Map 对象的方式，您将获得以下两种情况之一：

1) 只需在标签内放置一个 ref 即可获得一个 GoogleMap 对象，该对象不是 Map 对象，并且没有 getBounds 方法或任何其他可以让我检索地图边界的方法（据我所知可以告诉）。它的子对象之一是下面描述的“Zh”对象。

2) 在第 1 点的 ref 上调用 getInstance() 会得到一个神秘的、未记录的“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