，刪除先前標記，加載新的地方

-1

我用Ajax加載來自外部的JSON我的地方是這樣的：，刪除先前標記，加載新的地方

[{ 
    "id":"1", 
    "title": "Stockholm", 
    "lat": 59.3, 
    "lng": 18.1, 
}, 
{ 
    "id":"2", 
    "title": "Oslo", 
    "lat": 59.9, 
    "lng": 10.8, 
}, 
{ 
    "id":"2", 
    "title": "Copenhagen", 
    "lat": 55.7, 
    "lng": 12.6, 
}]

，並在頁面我的地圖加載有這樣的代碼：

var MapInitialized = false, 
     $map   = $('#googleMap .map'); 

    var mapProp = { 
     center:new google.maps.LatLng(35.6891970, 51.3889740), 
     zoom:12, 
     disableDefaultUI: true, 
     zoomControl: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     scrollwheel: false, 
     animation: google.maps.Animation.DROP, 
     mapTypeControlOptions: { 
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'bestfromgoogle'] 
      } 
     }; 
    var map = new google.maps.Map($map[0], mapProp); 

    var infoWindow = new google.maps.InfoWindow(); 

    $("select").change(function(){ 

     $.ajax({ 
      type: "GET", 
      url: "places.json", 
      dataType: "json", 
      beforeSend: function(){ $(".mapLoading").fadeIn();}, 
      complete: function(){ $(".mapLoading").fadeOut();}, 
      success: function(response){ 

       var LatLngList = new Array(); 
       var marker; 

       $.each(response, function(key, data) { 

        Point = new google.maps.LatLng(data.lat, data.lng); 

        LatLngList.push(Point); 

        console.log(LatLngList); 

        marker = new google.maps.Marker({ 
         position: Point, 
         map: map, 
         title: data.title 
        }); 
       }); 

       var bounds = new google.maps.LatLngBounds(); 
       for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) { 
        bounds.extend (LatLngList[i]); 
       } 

       map.fitBounds (bounds); 

      } 
     }); 
    });

我在我的HTML頁面上有一個選擇器，當用戶更改它時，ajax發送請求到json和標記將顯示在地圖上。現在我需要刪除所有以前的標記並在地圖上加載新標記而不加載新地圖。

來源

2015-10-18 MehryarS

可能重複刷新標記]（http://stackoverflow.com/questions/18443941/google-maps-refresh-markers） – geocodezip

[Google Map API - 刪除標記]的可能重複（http://stackoverflow.com/questions/16482949/google -Map-API雷莫ving-markers） – geocodezip

您需要將標記實例保存到一個數組中，以便稍後訪問它們。

訣竅是即可使用marker.setMap(null);從地圖

var markers = []; 

// ... 
// success callaback 
markers.forEach(function(m) { m.setMap(null); }); 

markers = response.map(function(data) { 
    return new google.maps.Marker({ 
        position: new google.maps.LatLng(data.lat, data.lng), 
        map: map, 
        title: data.title 
       }); 
});

來源

2015-10-18 11:07:40 jazzytomato

你的詭計對我沒有用:-(。再次向前一點添加新的點並顯示所有點。 – MehryarS

移除標記創建一個數組，以保持google.maps.Marker對象的引用：
```
var markers = []; 
```

將您的google.maps.Marker對象推入陣列中，因爲它們已創建：

var bounds = new google.maps.LatLngBounds(); 
$.each(response, function(key, data) { 
    var Point = new google.maps.LatLng(data.lat, data.lng); 
    bounds.extend(Point); 
    var marker = new google.maps.Marker({ 
       position: Point, 
       map: map, 
       title: data.title 
    }); 
    markers.push(marker); 
}); 
map.fitBounds (bounds);

當你要刪除的標記，通過陣列重申他們map屬性設置爲null，然後清除出數組：
```
for (var i=0; i<markers.length; i++) { 
    markers[i].setMap(null); 
} 
markers = []; 
```

proof of concept fiddle

[谷歌地圖的

來源

2015-10-18 21:56:45 geocodezip

我很困惑。你的小提琴是真實的，但是當我把你的代碼複製到我的項目中沒有用。 – MehryarS

，刪除先前標記，加載新的地方

回答

相關問題