在Google Maps Javascript API上自动更新标记位置

We are using MySQL and PHP to store the current location coordinates (latitude and longitude) after regular intervals. This is our code to add markers to the map from location coordinates fetched from the database.

我们使用MySQL和PHP在定期间隔后存储当前位置坐标（纬度和经度）。这是我们的代码，用于从数据库中获取的位置坐标向地图添加标记。

I want to auto-update the marker's location on the map using updated coordinates from the database without refreshing the map. I have tried searching over the internet but couldn't find a solution that would help to update the coordinates in real time. Any help will be highly appreciated.

我想使用数据库中更新的坐标自动更新地图上标记的位置，而无需刷新地图。我试过通过互联网搜索，但找不到有助于实时更新坐标的解决方案。任何帮助将受到高度赞赏。

<div id="map"></div>
 <script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 16,
      center: new google.maps.LatLng( lat , long),
      mapTypeId: 'roadmap'
    });

    var iconBase = 'XXXXXXX';
    var icons = {
      spot: {
        icon: 'XXXXXX'
      },
      0: {
        icon: iconBase + 'XXXXX'
      },
      1: {
        icon: iconBase + 'XXXX'
      },
    };

     function addMarker(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map
      });
      map.setCenter(marker.getPosition())
        if(feature.type!="spot"){
         var content = '<font color="#636363"><h3><img src="http://XXXX"> '+feature.rto+'<br><img style="vertical-align: middle" src="http://XXXXXXX"> <a style="text-decoration:none" href="tel:+91'+feature.phone+'">'+feature.phone+'</a></h3></font>';  
     }
     else {
        var content = '<b>Address: </b>'+feature.address+'<br><b>Information: </b>XXXXXXXX';
     }
        var infowindow = new google.maps.InfoWindow()

        google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
            return function() {
                infowindow.setContent(content);
                infowindow.open(map,this);
            };
        })(marker,content,infowindow)); 
    }

    var features = [
      {
        <?php echo "position: new google.maps.LatLng(".$lat.", ".$long."),";
        echo "type: 'spot',
        address: '".$r['address']."'";
        ?>
      } 
      <?php
        $e = mysqli_fetch_assoc(mysqli_query($con, "select distpref,radius from XXXXX XXXXXXXXXXXXXXX"));
        $er = $e['radius'];
        $dp = $e['distpref'];
      $sql = "SELECT *, ( $dp * acos( cos( radians(" . $lat . ") ) * cos( radians( latitude ) ) * cos( radians( longitude ) - radians(" . $long . ") ) + sin( radians(" . $lat . ") ) * sin( radians( latitude ) ) ) ) AS distance FROM markers HAVING distance<$er";

      $result = mysqli_query($con, $sql);
      while($row = mysqli_fetch_assoc($result)) {
      echo ", {
        position: new google.maps.LatLng(".$row['latitude'].", ".$row['longitude']."),
        type: '".$row['type']."',
        phone: '".$row['phone']."'
        }";
      }
      ?>
    ];

    for (var i = 0, feature; feature = features[i]; i++) {
      addMarker(feature);
    }
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap">
</script>`

Any alternative solutions will also be acceptable.

任何替代解决方案也是可以接受的。

1 个解决方案

#1

I couldn't live update multiple markers simultaneously. Instead, when the trip starts, I removed all markers and started to live update only one specific marker using Ajax and setInterval command.

我无法同时更新多个标记。相反，当旅程开始时，我删除了所有标记，并开始使用Ajax和setInterval命令仅更新一个特定标记。