如何在谷歌地图上移动标记反应js

Question

I want to move multiple markers on the google map when I get the latitude and longitude from MongoDB. I'm always getting updated latitude and longitude from db, but my markers are not moving, and after refreshing the page, the markers positions are changing, but I need to do it without refreshing the page.

This is my code`

class Maps extends React.Component {
 constructor(props){
 super(props);
    this.state = { 
        dronePosition: []
     };

    var _this = this;
    const config = { 
      headers: {
                "Authorization" : `Bearer ${localStorage.getItem('token')}`,
              }
    };


// If I'm using setInterval, the markers are not showing at all. That's why here I call the getAllDrones() function
// setInterval(function(){
axios.get(packages.proxy+'drones/getAllDrones',config)
             .then(res => {
 //Here I'm always getting updated positions for markers from backend.
                _this.state.dronePosition = [];
               res.data.forEach( function(element) {
                if(element.userId == localStorage.getItem("user_id")){
                    _this.state.dronePosition.push({id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"})
                }
                else{
                    _this.state.dronePosition.push({id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"})
                }
               });
                 _this.getAllDrones();
             }) 

        // }, 2000)

    }

getAllDrones(){
        var _this = this;
        const config = { 
              headers: {
                        "Authorization" : `Bearer ${localStorage.getItem('token')}`,
                      }
            };
        axios.get(packages.proxy+'drones/getAllDrones',config)
             .then(res => {
                _this.state.dronePosition = [];
               res.data.forEach( function(element) {
                if(element.userId == localStorage.getItem("user_id")){
                    _this.state.dronePosition.push({id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"})
                }
                else{
                    _this.state.dronePosition.push({id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"})
                }
               });
                _this.getAllDrones2();
             }) 
    }

getAllDrones2(){
        var _this = this;
        const config = { 
              headers: {
                        "Authorization" : `Bearer ${localStorage.getItem('token')}`,
                      }
            };
        axios.get(packages.proxy+'drones/getAllDrones',config)
             .then(res => {
                _this.state.dronePosition = [];
               res.data.forEach( function(element) {
                if(element.userId == localStorage.getItem("user_id")){
                    _this.state.dronePosition.push({id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"})
                }
                else{
                    _this.state.dronePosition.push({id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"})
                }
               });
                _this.getAllDrones();
             }) 
    }


render(){
    var _this = this;
    const { google } = this.props;
    const icon = {
        url: `data:image/jpeg;base64,${binary_data}`, 
        scaledSize: new google.maps.Size(40, 40), 
        origin: new google.maps.Point(0,0), 
        anchor: new google.maps.Point(0, 0) 
    };
        return (
            <div>
                <Header />
                    <Map className="map" google={google} initialCenter={userLocation} zoom={15} onClick={this.onMapClicked} >

                                {_this.state.dronePosition.map(marker => (
                                    <Marker
                                      onClick={_this.MarkerClick.bind(_this, marker.id)}
                                      icon={marker.photo}
                                      position={{ lat: marker.latitude, lng: marker.longitude }}
                                      key={marker.id}
                                    />
                                ))}         
                    </Map>
            </div>
            )
    }

Answer 1

If you want the markers to update without a refresh of the page you need to add them to the component state. Since I don't have access to your mongo-db I've used a dummy api just for demo purpose.

And when making api-calls they should be used in Lifecycle-method componentDidMount, not in the constructor.

I've left out the if-statement for local storage and element.userID since I don't know what that is and the component since I don't have access to it.

import React from "react";
import axios from "axios";

export default class Maps extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dronePosition: []
    };
  }

  componentDidMount() {
    this.refreshMarkers();
  }

  refreshMarkers = () => {
    // Clear state to prevent duplicates
    this.setState({dronePosition: []});
    const config = {
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`
      }
    };
    axios.get("https://swapi.co/api/starships").then(res => {
      res.data.results.forEach(element => {
        this.setState({
          dronePosition: [...this.state.dronePosition, element]
        });
      });
      console.log(this.state.dronePosition);
    });
  };

  render() {
    return(
      <div>
        <div onClick={this.refreshMarkers}>Click on me to refresh markers</div>
        render the map here...
      </div>
    ); 
  }
}