javascript - 在 google-map-react 中向 Google map 添加标记

Question

我正在使用google-map-react用于创建 Google map 和多个标记的 NPM 包。

问题:我们如何向 map 添加默认的 Google map 标记？

From this Github issue ，看来我们需要使用 onGoogleApiLoaded 访问内部 Google Maps API功能。

引用an example from the Google Maps JS API docs ，我们可以使用下面的代码来渲染标记，但是我们如何定义对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

编辑:
由于发布了此答案，GoogleMapReact 元素的文档(可能还有 API)已更改为支持子项。任何具有 lat 和 lng 的子项都将呈现在 map 上的相应位置，@Jobsamuel 的答案也表明了这一点。

onGoogleApiLoaded 回调不应用于此目的，因为它不如声明式样式，并且如果对 map 进行更改，则不会重新运行。

<小时/>

原始答案(已过时):

从自述文件中的描述来看，这一点可能并不完全清楚，但 maps 参数实际上是 map 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!'
  });
}