Javascript 在不刷新整个地图的情况下实时更新谷歌地图标记

我一直在关注谷歌网站上关于如何正确使用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>

设备的位置
var customLabel={
餐厅：{
标签：“R”
},
酒吧：{
标签：“B”
}
};
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：新的google.maps.LatLng（XX.XXXX，XX.XXXX），
缩放：17
});
var infoWindow=new google.maps.infoWindow；
//根据PHP或XML文件的名称进行更改
下载URL（'http://XXXXX.com/XXXXXXX.php/，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName（'marker'）；
Array.prototype.forEach.call（markers，function（markereem））{
var id=markereem.getAttribute（'id'）；
var name=markerem.getAttribute（'id'）；
var address=markerem.getAttribute（'address'）；
var type=markereem.getAttribute（'type'）；
var point=new google.maps.LatLng(
parseFloat（markerem.getAttribute（'lat'）），
parseFloat（markerem.getAttribute（'lng'））；
var infowincontent=document.createElement（'div'）；
var strong=document.createElement（'strong'）；
strong.textContent=名称
infowincontent.appendChild（强）；
infowincontent.appendChild（document.createElement（'br'））；
var text=document.createElement（'text'）；
text.textContent=地址
infowincontent.appendChild（文本）；
var icon=customLabel[type]| |{}；
var marker=new google.maps.marker({
地图：地图，
位置:点,，
标签：icon.label
});
marker.addListener（'click'，function（））{
setContent（infowincontent）；
信息窗口。打开（地图、标记）；
});
});
})
}
函数下载url（url，回调）{
var请求=window.ActiveXObject？
新的ActiveXObject（'Microsoft.XMLHTTP'）：
新的XMLHttpRequest；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
request.onreadystatechange=doNothing；
回调（请求、请求、状态）；
}
};
打开（'GET'，url，true）；
请求发送（空）；
}
函数doNothing（）{}

我尝试将setInterval（）添加到initMap（）和downloadUrl（）。我不想将间隔添加到initMap（）中，除非有办法使代码不会反复刷新整个映射。有什么办法可以做到这一点吗？

以下是我的建议：

创建名为

marker

的全局变量，并在

initMap

函数中对其进行初始化

每当位置更改时，使用

marker.setPosition（新的google.maps.LatLng（/*放置lat*/，/*放置lng*/）

功能将标记设置到其新位置。
这样，您就不会一次又一次地重新创建标记。
希望有帮助 以下是我的建议：

创建名为

marker

的全局变量，并在

initMap

函数中对其进行初始化

每当位置更改时，使用

marker.setPosition（新的google.maps.LatLng（/*放置lat*/，/*放置lng*/）

功能将标记设置到其新位置。
这样，您就不会一次又一次地重新创建标记。
希望有帮助

---

要更新标记，请执行以下操作：1。删除现有标记，2。再次调用下载URL。如果这是您需要经常做的事情，并且标记正在“移动”，您可以（而不是删除所有标记），将每个标记移动到其新位置（在downloadUrl的回调函数中）相关问题：注意，您可能还存在缓存问题，发布的信息很难说。要更新标记：1。删除现有标记，2。再次调用下载URL。如果这是您需要经常做的事情，并且标记正在“移动”，您可以（而不是删除所有标记），将每个标记移动到其新位置（在downloadUrl的回调函数中）相关问题：注意，您可能还存在缓存问题，发布的信息很难判断。