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

Question

我一直在关注谷歌网站上的教程，了解如何使用 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((。我不想将间隔添加到 initMap(( 中，除非有一种方法可以使代码不会一遍又一遍地刷新整个地图。有什么办法可以做到这一点吗？

Answer 1

这是我的建议：

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