Update Marker Google Maps API mit JQuery

Question

Ich habe Probleme mit dem Code zum Aktualisieren von Markern in Google Map API. Ich habe $.ajax Funktion, die Daten herunterlädt. Dann initialisiere ich die Karte initMap() und ich Iterate durch Daten von $.ajax erhalten. Ich erstelle Marker, schiebe sie in ein Array Markers. Die Markierungen werden erfolgreich auf der Karte angezeigt. Dann muss ich die Marker alle 5 Sekunden aktualisieren. Also habe ich eine neue Funktion setInterval definiert, die eine Funktion ausführen wird updateMarkers Die Funktion updateMarkers entfernt Marker aus der Karte und setzt ein Array von Markern auf ein leeres Array. Dann rufe ich wieder $ .ajax function (ich bekomme den Fehler 'undefined - ich vermute wegen des Umfangs). Dann starte ich die Funktion Markers(Data). Ich habe versucht, den Code mehrfach zu refaktorieren. Ich komme so weit wie Entfernen und Löschen von Markern aus einem Array. Dann bekomme ich eine Endlosschleife, die Daten herunterlädt und sie in ein Array verschiebt und mein Browser friert ein. Kann mir jemand mit dem unten stehenden Code helfen? Ich würde das wirklich zu schätzen wissen!

var map; 
var marker; 
var markers = []; 
var locations = []; 


$(function downloadJSON() { 
    type: 'GET', 
    $.ajax({ 
     url: 'url....', 
     dataType: 'json', 
     contentType: "application/json;charset=utf-8", 
     success: Markers 
    }); 
}); 

function Markers(data) { 

    for (var i = 0; i < data.length; i++) { 
     var position = data[i].location; 
     var title = data[i].title; 
     marker = new google.maps.Marker({ 
      map: map, 
      position: position, 
      title: title, 
      id: i 
     }); 
     markers.push(marker); 
     } 
} 

function initMap() { 
      map = new google.maps.Map(document.getElementById('map'), { 
        center: new google.maps.LatLng(10,-10), 
        zoom: 15 
       }); 

setInterval(function() { 
     updateMarkers(); 
    }, 5000); 

function updateMarkers() { 

    downloadJSON(); 

    //remove markers from the map and delete array markers: 
    for (var i = 0; i < markers.length; i++) { 
    markers[i].setMap(null); 
    markers = []; 
    } 

Markers(data); 

} 

<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=APIKEY&v=3&callback=initMap"> 
</script> 

Answer 1

Zuerst rufen Sie updateMarkers() nicht alle 5 Sekunden auf. Rufen Sie es auf, wenn der Benutzer mit der Karte interagiert. Google Maps-Bibliothek bietet eine sehr nützliche Ereignis-Listener für diese:

google.maps.event.addListener(map, 'idle', updateMarkers); 

Zweitens sehe ich nicht den Grund für die updateMarkers Funktion zu existieren. Fügen Sie der Funktion Marker einfach etwas hinzu, um die Karte und das Array zu löschen, bevor Sie die neuen hinzufügen.

function Markers(data) { 
    // clear map 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].setMap(null); 
    } 
    // clear array 
    markers = []; 
    for (var i = 0; i < data.length; i++) { 
     var position = data[i].location; 
     var title = data[i].title; 
     marker = new google.maps.Marker({ 
      map: map, 
      position: position, 
      title: title, 
      id: i 
     }); 
     markers.push(marker); 
    } 
}