如何在 setInterval 刷新时删除地图标记（js）

Question

伙计们需要一些关于谷歌地图的帮助，我正在使用 MySQL DB 坐标创建一个跟踪网络应用程序，到目前为止，跟踪工作良好，除了谷歌地图标记在刷新时不断重复，我已经设置了地图标记刷新使用每 5 秒设置一个 setInterval 函数（用于测试）。我已经尝试过 clearoverlays() 方法并删除地图标记方法（来自谷歌示例）但不起作用。感谢您的帮助，谢谢

    <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 函数中的 BindMarker() 之前调用了删除覆盖函数、删除标记以及删除标记函数，以便在绑定新标记之前删除标记 em>

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 是一个谷歌地图标记对象的数组。所以这段代码在这方面是有意义的：

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

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

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

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

现在，deleteMarkers() 函数将按预期工作。