2016-06-20 55 views
0

有一個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; 
    } 

回答

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> 
相關問題