古いマーカーをクリアしてから更新する

Question

以下は私のウェブサイトのコードです。毎秒リフレッシュします。新しいlat/lngをリフレッシュすると、新しいマーカーがロードされますが、古いマーカーは保持されます。私は運がないと多くのフォーラムなどを試してみました。どんな助けでも感謝しています。

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

は、ここでは、/更新マーカーと情報ウィンドウを作成する方法は次のとおりです。

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