实时更新谷歌地图标记，无需刷新整个地图答案

【问题标题】：Update Google Maps markers in real time without refreshing entire map实时更新谷歌地图标记，无需刷新整个地图
【发布时间】：2018-01-21 14:31:31
【问题描述】：

我一直在关注谷歌网站上关于如何使用 MySQL 数据正确实现谷歌地图的教程。一切正常，但在地图上获取最新标记的唯一方法是刷新页面。我试图将 SetInterval 添加到整个函数中，这确实有效。但是，每次循环时，整个地图都会刷新。如果您在地图上四处移动然后它会重置您，这尤其令人讨厌。有没有办法只刷新标记？按照我的理解，每次循环中都必须从 MySQL 中提取最新数据。这是我的代码：

<div class="container">
  <h3>Location of Devices</h3>

  <div id="map">

  </div>
</div>
<script>

var customLabel = {
    restaurant: {
      label: 'R'
    },
    bar: {
      label: 'B'
    }
  };

    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(XX.XXXX, XX.XXXX),
      zoom: 17
    });
    var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP or XML file
      downloadUrl('http://XXXXX.com/XXXXXXX.php/', function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
          var id = markerElem.getAttribute('id');
          var name = markerElem.getAttribute('id');
          var address = markerElem.getAttribute('address');
          var type = markerElem.getAttribute('type');
          var point = new google.maps.LatLng(
              parseFloat(markerElem.getAttribute('lat')),
              parseFloat(markerElem.getAttribute('lng')));

          var infowincontent = document.createElement('div');
          var strong = document.createElement('strong');
          strong.textContent = name
          infowincontent.appendChild(strong);
          infowincontent.appendChild(document.createElement('br'));

          var text = document.createElement('text');
          text.textContent = address
          infowincontent.appendChild(text);
          var icon = customLabel[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            label: icon.label
          });
          marker.addListener('click', function() {
            infoWindow.setContent(infowincontent);
            infoWindow.open(map, marker);
          });
        });
      })
    }



  function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;

    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request, request.status);
      }
    };

    request.open('GET', url, true);
    request.send(null);
  }

  function doNothing() {}
</script>

我尝试将 setInterval() 添加到 initMap() 和 downloadUrl()。我不想将 Interval 添加到 initMap() ，除非有办法让代码不会一遍又一遍地刷新整个地图。有没有办法做到这一点？

【问题讨论】：

更新标记： 1. 删除现有标记， 2. 再次调用 downloadUrl。如果您需要做很多事情，并且标记正在“移动”，您可以（而不是删除所有标记）将每个标记移动到其新位置（在 downloadUrl 的回调函数中）
相关问题：Google Maps V3: Updating Markers
注意，您可能还遇到了缓存问题，很难通过发布的信息来判断。

标签： javascript mysql google-maps google-maps-api-3

【解决方案1】：

这是我的建议：

创建一个名为marker 的全局变量并在initMap 函数中对其进行初始化。
每当位置改变时，使用marker.setPosition(new google.maps.LatLng(/*put the lat*/,/*put the lng*/)) 函数将标记设置到新位置。
通过这种方式，您不会一遍又一遍地重新创建标记。
希望对您有所帮助！

【讨论】：