Wie man eine Markierung in Google Maps hinzufügt, wenn das Objekt bewegt wird, ist React

Question

Ich baue React App mit API, die einige Objekte verfolgt und ich verwende keine Lib, um die Google Maps zu verwalten. Wenn ich ein statisches LatLng setze, zeigt es, wo es sein sollte, aber wenn es Daten erhält, die jede Sekunde aktualisiert werden, wird es nicht angezeigt. kannst du mir helfen?

class GoogleMap extends Component { 

    shouldComponentUpdate() { 
     return false; 
    } 

    componentWillReceiveProps(nextProps) { 
     this.map.panTo({lat: nextProps.lat, lng: nextProps.lng}) 
    } 

    componentDidMount() { 
     // this.myLatLng = {lat: -25.363, lng: 131.044}; 
     this.position = { 
      center: { 
       lat: this.props.lat, 
       lng: this.props.lng 
      } 
     }; 
     this.mapOptions = { 
      center: this.position, 
      zoom: 5, 
      disableDefaultUI: true 
     }; 
     this.map = new google.maps.Map(this.refs.map, this.mapOptions); 
     this.marker = new google.maps.Marker({ 
      position: this.myLatLng, 
      map: this.map 
     }); 
    } 

    render() { 
     return (
      <div id="map" ref="map"/> 
     ); 
    } 
} 
export default GoogleMap; 

Answer 1

1) Markerposition bearbeiten Sie setPosition function von Marker Klasse statt mapTo function nutzen könnte, die die Mitte der Karte ändert sich in die gegebene lat/lng

2) Es ist ein Tippfehler position bei der Initialisierung das erwartete Format für center Eigenschaft MapOptions object ist wie folgt:

this.position = { 
    lat: this.props.lat, 
    lng: this.props.lng 
}; 

das folgende Beispiel zeigt h Um eine Markierung in React zu bewegen:

Demo

Answer 2

Sie haben marker.setPosition zu verwenden, um die Position eines Markers zu aktualisieren, es nimmt einen LatLng als Argument und bewegt den dort Marker.

Hier ist ein Verweis auf die Google Maps Javascript API für Marker. https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker