javascript - 实时更新 Google map 标记，无需刷新整个 map

Question

我一直在关注谷歌网站上关于如何使用 MySQL 数据正确实现谷歌地图的教程。一切正常，但获取 map 上最新标记的唯一方法是刷新页面。我尝试将 SetInterval 添加到整个函数中，这确实有效。然而，每次循环时，整个 map 都会刷新。如果您在 map 上移动，然后它会在您身上重置，这会特别烦人。有什么办法可以只刷新标记吗？按照我的理解，每次循环都必须从 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() 中，除非有办法使代码不会一遍又一遍地刷新整个 map 。有什么办法可以实现这一点吗？

Answer 1

这是我的建议:

1. 创建一个名为 marker 的全局变量，并在 initMap 函数中对其进行初始化。
2. 每当位置发生变化时，请使用 marker.setPosition(new google.maps.LatLng(/*put the lat*/,/*put the lng*/)) 函数将标记设置为其位置新的位置。
   这样您就不会一遍又一遍地重新创建标记。
   希望有帮助!