在谷歌地图中添加标记谷歌地图反应

Question

我使用google-map-react NPM包创建一个谷歌地图和几个标记。

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

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

这可能不是从在自述的描述完全清楚，但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!' 
    }); 
}