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

Question

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

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

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

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

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

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

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

现在，deleteMarkers() 函数将按预期运行。

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

how to remove map markers on setInterval refresh (js)

javascript

google-maps

google-maps-api-3

maps

google-maps-markers