新しい地図を追加する前にGoogleマップからすべてのマーカーを削除する方法

Question

googleマップで移動するオブジェクトの場所を表示するasp.net Webフォームがあります。所定の間隔に従って、データベースからオブジェクトの現在の位置を取り出し、マップ上で更新する。

すべて正常です。しかし、各間隔ごとに、前のマーカーの上に同じマーカーが追加されます。マップ上のマーカーをクリアしてから、現在のデータをデータベースから取得します。現在の値を呼び出す前にmarkers.setMap（null）を使用しました。地図上にマーカーは表示されません。どんな助けもありがとう。

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

次のように私は答えを見つけた....

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