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

Posted 2023-03-28

【中文标题】如何在 setInterval 刷新时删除地图标记（js）

【英文标题】：how to remove map markers on setInterval refresh (js)

【发布时间】：2021-03-31 18:28:11

【问题描述】：

伙计们需要一些关于谷歌地图的帮助，我正在使用 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;
 

【问题讨论】：

这个：“我已经尝试过......并且......但不起作用。” - 需要澄清。向我们展示您尝试过的方法，展示无效的方法。

@RandyCasburn 编辑帖子，谢谢

【参考方案1】：

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

它是您从中绘制的示例代码，变量markers 是一个谷歌地图标记对象的数组。所以这段代码在这方面是有意义的：

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

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

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

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

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

【讨论】：

非常感谢您的帮助，我按照您的建议更正了代码，并在我的 setInterval 中使用了 clearOverlays() 函数，现在可以完美运行

@iwhd - 请考虑：What should I do when someone answers my question?