如何删除setInterval刷新(js)上的映射标记

Question

伙计们在谷歌地图方面需要一些帮助，我正在使用MySQL DB坐标创建一个跟踪web应用程序，到目前为止，除了谷歌地图标记在刷新时不断重复之外，跟踪效果很好，我已经使用setInterval函数设置了每5秒刷新一次地图标记(用于测试(。我尝试过clearoverlays((方法和remove map marks方法(来自谷歌示例(，但都不起作用。感谢您的帮助，谢谢

<script defer
src="https://maps.googleapis.com/maps/api/js?key="KEY"8&callback=initMap">
</script>
<script type="text/javascript">
setInterval(function () {  
BindMarker();
}, 5000);
var customIcons = {
blue: { icon: 'blue48.png'},  
};
var marker;
var map = null;
var infoWindow = null;
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(1.4370993, 110.3387572),
zoom:15,
});
infoWindow = new google.maps.InfoWindow; 

}
function BindMarker() { 
downloadUrl('maps1.php', function (data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var icon = customIcons["blue"] || {}; 
marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.BOUNCE,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
}
});
}
function bindInfoWindow(marker, map, infoWindow) {
google.maps.event.addListener(marker, 'click', function () {
map.setCenter(marker.getPosition());
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function () {
if (request.readyState == 4) {
request.önreadystatechange = doNothing;
callback(request, request.status); }
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() { }
</script>

我尝试的函数如下所示(我在setInterval函数中调用了remove overlay函数、remove markers以及BindMarker((之前的delete markers函数，以便在绑定新标记之前删除标记

function setMapOnAll(map) {
for (let i = 0; i < markers.length; i++) { markers[i].setMap(map); }
}
function clearMarkers() {setMapOnAll(null); }

function deleteMarkers() {clearMarkers(); markers = [];}

function clearOverlays() {
while(markers.length) { markers.pop().setMap(null); }
markers.length = 0;
}

Answer 1

我相信您混淆了示例，您尝试的代码逐字逐句地显示了这些示例，以及您的代码实际在做什么。

变量markers是Google Map标记对象的数组，它是您正在绘制的示例代码。所以这个代码在这方面是有意义的：

function deleteMarkers() {clearMarkers(); markers = [];}

但是，您的代码并没有创建这些对象的数组。您的代码没有名为markers的变量，该变量可在downloadUrl()函数之外访问。变量markers确实显示在该函数中，但它包含一个HTMLCollection元素，而不是一个标记数组。

要解决此问题，您需要在创建变量名marker之后立即创建一个名为markers的数组。

然后，在for循环中，在创建marker之后，将该标记推送到markers数组。您还必须将现有的markers变量重命名为更合适的变量，如markerElements。

现在，deleteMarkers()功能将按预期工作。