Estoy construyendo la aplicación React con API que rastrea algunos objetos y no uso ninguna biblioteca para administrar los mapas de Google. Cuando configuro un LatLng estático, muestra dónde debería estar, pero cuando obtiene datos que se actualizan cada segundo, no se muestran. ¿me puedes ayudar?

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;
0
notFromHere 15 nov. 2017 a las 01:39

2 respuestas

La mejor respuesta

1) Para actualizar la posición del marcador, puede utilizar la setPosition función de la clase Marker en lugar de la mapTo función que cambia el centro del mapa a la lat / lng dada

2) Hay un error tipográfico al inicializar position, el formato esperado para la propiedad center de MapOptions objeto es el siguiente:

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

El siguiente ejemplo demuestra cómo mover un marcador en React:

Demo

1
Vadim Gremyachev 20 nov. 2017 a las 14:14

Tienes que usar marker.setPosition para actualizar la posición de un marcador. Toma un LatLng como argumento y mueve el marcador allí.

Aquí hay una referencia a la API de JavaScript de Google Maps para el marcador. https://developers.google.com/maps/documentation/ javascript / 3.exp / referencia # Marcador

0
Dakota 15 nov. 2017 a las 01:37