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);从地图中删除标记

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

创建一个数组以保留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

删除Google地图中的上一个标记并加载新位置

2 个答案: