在google-map-react中将标记添加到Google Maps

Question

我正在使用google-map-reactNPM包创建Google Map和几个标记。

问题： 我们如何将默认的Google Maps标记添加到地图？

从这个Github问题来看，似乎我们需要使用onGoogleApiLoaded函数访问内部Google Maps API 。

参考Google Maps JS
API文档中的示例
，我们可以使用以下代码来呈现标记，但是如何定义对的引用map？

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
});

当前代码：

renderMarkers() {
    ...
}

render() {
    return (
        <div style={{'width':800,'height':800}}>
            <GoogleMap
                bootstrapURLKeys={{key: settings.googleMapApiKey}}
                defaultZoom={13}
                defaultCenter={{ 
                    lat: this.props.user.profile.location.coordinates[1], 
                    lng: this.props.user.profile.location.coordinates[0]
                }}
                onGoogleApiLoaded={({map, maps}) => this.renderMarkers()}
                yesIWantToUseGoogleMapApiInternals
            >
            </GoogleMap>
        </div>
    );
}

Answer 1

从自述文件中的描述中可能无法完全清楚这一点，但maps实际上，该参数是maps API对象（map当然是当前的Google
Map实例）。因此，您应该将两者都传递给您的方法：

onGoogleApiLoaded={({map, maps}) => this.renderMarkers(map, maps)}

并使用它们：

renderMarkers(map, maps) {
  let marker = new maps.Marker({
    position: myLatLng,
    map,
    title: 'Hello World!'
  });
}