如何使用React谷歌地图API访问地图对象？

Question

我正在尝试使用新的@react Google maps/api库访问Web应用程序中安装的Google Map的getBounds方法，该库取代了tomchentw不支持的react Google maps库。

与旧的react GoogleMaps不同，这个新库似乎无法访问此处定义的GoogleMap对象。根据您尝试访问Google Map对象的方式，您将获得以下两种情况之一：

1）简单地将ref放置在标签中，就会得到一个GoogleMap对象，它不是Map对象，也没有getBound方法或任何其他允许我检索地图边界的方法（据我所知）。它的一个子对象是下面描述的“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

谷歌地图和Zh似乎都没有提供任何访问实际地图对象的方法，也没有提供任何返回其生命统计数据（例如其边界）的方法。有人知道如何使用此库访问地图对象和/或其生命统计信息吗？

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