Thêm điểm đánh dấu vào Google Maps trong google-map-reaction

Question

Tôi đang sử dụng gói google-map-react NPM để tạo Bản đồ Google và một số điểm đánh dấu.

Câu hỏi: Làm cách nào để thêm điểm đánh dấu mặc định trên Google Maps vào bản đồ?

From this Github issue, có vẻ như chúng tôi cần truy cập API Google Maps bên trong bằng chức năng onGoogleApiLoaded.

Tham chiếu đến an example from the Google Maps JS API docs, chúng tôi có thể sử dụng mã sau đây để hiển thị điểm đánh dấu, nhưng làm cách nào để xác định tham chiếu đến map?

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

Mã hiện tại:

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

này có thể không hoàn toàn rõ ràng từ mô tả trong Readme, nhưng lập luận maps được, trên thực tế, đối tượng bản đồ API (và map là, tất nhiên, bản đồ Google Map hiện tại). Vì vậy, bạn phải vượt qua cả hai phương pháp của bạn:

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

và sử dụng chúng:

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