Блог

Ребята, нужна небольшая помощь с картами Google, я создаю веб-приложение для отслеживания, используя координаты базы данных MySQL, отслеживание пока работает хорошо, за исключением того, что маркеры карты Google продолжают повторяться при обновлении, я установил обновление маркера карты с помощью функции setInterval каждые 5 секунд (для тестирования). Я пробовал методы clearoverlays () и метод удаления маркеров карты (из примера Google), но не работает. Ценю вашу помощь, спасибо

     <script defer
    src="https://maps.googleapis.com/maps/api/js?key="KEY"8amp;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>
 

Функции, которые я пробовал, приведены ниже (я вызвал функцию удаления наложений, удаления маркеров, а также функцию удаления маркеров перед BindMarker() внутри функции setInterval, чтобы она удаляла маркеры перед привязкой новых маркеров

 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;
 }
 

Я полагаю, что вы перепутали примеры, которые ваш попытавшийся код показывает дословно, и что на самом деле делает ваш код.

В примере кода, из которого вы рисуете, переменная markers представляет собой массив объектов маркеров Google Map. Так что этот код имеет смысл в этом отношении:

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

Но ваш код не создает массив этих объектов. В вашем коде нет переменной с именем markers , доступной вне downloadUrl() функции. Переменная markers действительно отображается внутри этой функции, но она содержит элемент HTMLCollection, а не массив маркеров.

Чтобы исправить это, вам нужно создать массив с именем markers сразу после создания имени переменной marker .

Затем, в for цикле, сразу после создания marker , вставьте этот маркер в markers массив. Вам также придется переименовать существующую markers переменную во что-то более подходящее, например markerElements .

Теперь deleteMarkers() функция будет работать так, как ожидалось.