Klare alte Markierung (en) dann Update

Question

Unten ist der Code meiner Website. Es wird jede Sekunde aktualisiert. Nach dem Auffrischen des neuen Breitengrads werden die neuen Marker geladen, aber die alten Marker bleiben erhalten. Ich habe viele Foren usw. ohne Glück ausprobiert. Jede Hilfe wird geschätzt, danke.

function initialize() { 

var mapOptions = { 
    center: new google.maps.LatLng(-36.363, 175.044), 
    zoom: 5, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var infoWindow = new google.maps.InfoWindow(); 
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
window.setInterval(function() { 
     readData(); 
    }, 1000); 
} 
    function readData() { 

    $.getJSON('https://crossorigin.me/http://radar1.ddns.net:3080/data/aircraft.json', function (data) { 
     $.each(data.aircraft, function (i, value) { 



      var myLatlng = new google.maps.LatLng(value.lat, value.lon, value.flight, value.altitude); 
     var marker = new google.maps.Marker({ 
       position: myLatlng, 
       icon: 'airplane.jpg', 
       map: map, 
       title: "Callsign Altitude " + value.flight + value.altitude 


      }); 

} 

      var infowindow = new google.maps.InfoWindow({ 
       content: '<b>Speed:</b> ' + value.speed+ '<b> HEX:</b>' + value.hex+ '<b> Altidtude: </b>' +value.altitude + '<b> Vertical Rate: </b>' +value.vert_rate 


}); 

google.maps.event.addListener(marker, 'click', function() { 
infowindow.open(map, marker); 
}); 






     }); 
    }); 

} 

Answer 1

Hier ist, wie Sie/update erstellen Markierungen und Infofenster:

var infoWindows = {}; 
var markers = {}; 

function initMap() { 
    var mapOptions = { 
    center: new google.maps.LatLng(-36.363, 175.044), 
    zoom: 5, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    window.setInterval(readData, 1000); 
} 

function text(value) { 
    return '<b>Speed: </b> ' + value.speed + '<br><b>HEX: </b>' + value.hex + '<br><b>Altitude: </b>' + value.altitude + '<br><b>Vertical Rate: </b>' + value.vert_rate; 
} 

function createInfoWindow(value, marker, map) { 
    iw = new google.maps.InfoWindow({ 
    content: text(value) 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    iw.open(map, marker); 
    }); 
    return iw; 
} 

function readData() { 
    $.getJSON('https://crossorigin.me/http://radar1.ddns.net:3080/data/aircraft.json', function(data) { 
    $.each(data.aircraft, function(i, value) { 
     var myLatlng = new google.maps.LatLng(value.lat, value.lon, value.flight, value.altitude); 
     if (markers[value.squawk]) { 
     markers[value.squawk].setPosition(myLatlng); 
     console.log("moving marker for " + value.squawk); 
     infoWindows[value.squawk].setContent(text(value)); 
     } else { 
     // create new 
     markers[value.squawk] = new google.maps.Marker({ 
      position: myLatlng, 
      // icon: 'airplane.jpg', 
      map: map, 
      title: "Callsign: " + value.flight + ", Altitude: " + value.altitude 
     }); 
     console.log("creating marker for " + value.squawk); 
     infoWindows[value.squawk] = createInfoWindow(value, markers[value.squawk] ,map) 
     } 
    }); 
    }); 
}