So entfernen Sie alle Markierungen aus Google Maps, bevor Sie neue hinzufügen

Question

Es gibt ein asp.net Webformular, um den Standort eines sich bewegenden Objekts in Google Map anzuzeigen. Nach einem bestimmten Intervall holt es den aktuellen Standort des Objekts aus der Datenbank und aktualisiert es auf der Karte.

Alles funktioniert gut. Aber für jedes Intervall fügt es dieselben Markierungen über den vorherigen hinzu. Ich möchte die Markierungen auf der Karte löschen, bevor Sie die aktuellen Daten aus der Datenbank abrufen. Ich habe markers.setMap (null) vor dem Aufruf der aktuellen Werte verwendet. Dann zeigt es keinen Marker auf der Karte. Jede Hilfe wäre willkommen.

window.onload = function() { 
     LoadGoogleMap(); 
    } 

    var markers = []; 
    var map; 
    function LoadGoogleMap() { 
     markers = GetMapData(); 
     var mapOptions = { 
      center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var infoWindow = new google.maps.InfoWindow(); 
     map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 

     setInterval(SetMarker, 5000); 
    } 

function SetMarker() { 

     //markers.setMap(null) 

     markers = []; 
     markers = GetMapData(); 
     for (i = 0; i < markers.length; i++) { 
      var data = markers[i] 
      var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
      var icon = ""; 
      icon = data.color; 
      icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png"; 
      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       title: data.Name, 
       icon: new google.maps.MarkerImage(icon) 
      }); 

     } 
     }; 

function GetMapData() { 
     var json = ''; 
     $.ajax({ 
      type: "POST", 
      url: "WebForm4.aspx/GetData", 
      data: "{}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      async: false, 
      success: function (resp) { 
       json = resp.d; 
      }, 
      error: function() { debugger; } 
     }); 
     return json; 
    } 

Answer 1

fand ich die Antwort wie folgt ....

<script type="text/javascript"> 
    window.onload = function() { 
     LoadGoogleMap(); 
    } 


    var markers; 
    var map; 
    var markers1 = []; 
    function LoadGoogleMap() { 
     var mapOptions = { 
      center: new google.maps.LatLng('6.894373', '79.857963'), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var infoWindow = new google.maps.InfoWindow(); 
     map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 
     setInterval(SetMarker, 3000); 

    } 


    function SetMarker() { 

     for (i = 0; i < markers1.length; i++) { 
      markers1[i].setMap(null); 
     } 
     markers1 = []; 
     markers = []; 
     markers = GetMapData(); 

     for (i = 0; i < markers.length; i++) { 

      var data = markers[i] 
      var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
      var icon = ""; 
      icon = data.color; 
      icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png"; 
      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       title: data.Name, 
       icon: new google.maps.MarkerImage(icon) 
      }); 
      markers1.push(marker); 
      //var infoWindow = new google.maps.InfoWindow(); 
      //infoWindow.setContent("<div style = 'width:50px;min-height:20px'>" + data.Description + "</div>"); 
      //infoWindow.open(map, marker); 
     } 
    }; 


    function GetMapData() { 
     var json = ''; 
     $.ajax({ 
      type: "POST", 
      url: "WebForm5.aspx/GetData", 
      data: "{}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      async: false, 
      success: function (resp) { 
       json = resp.d; 
      }, 
      error: function() { debugger; } 
     }); 
     return json; 
    } 



</script>