在谷歌地圖中添加標記谷歌地圖反應

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!' 
    }); 
}