删除谷歌地图中的先前标记并加载新地点

Question

我使用 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 发送请求，标记将显示在地图上。现在我需要删除所有以前的标记并在地图上加载新标记而不加载新地图。

Answer 1

您需要将标记实例保存到数组中，以便以后访问它们。

然后诀窍是使用marker.setMap(null); 从地图中删除标记​​p>

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

Answer 2

1. 创建一个数组来保存 google.maps.Marker 对象的引用：

   var markers = [];
   

2. 在创建时将您的 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);
   

3. 当您想删除标记时，遍历数组，将其map 属性设置为null，然后清除数组：

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

proof of concept fiddle