如何在边界更改时清除所有标记

Question

我正在玩 Google 地图并使用 jQuery Ajax 从数据库 table 加载标记。现在一切对我来说都很完美，但有两件事，我不知道如何实施 Google map:

当bounds_changed.
关闭其他信息窗口并显示当前信息窗口。

对于第 2 点：

我已经尝试使用此代码，但没有成功。你可以看到我已经在我的代码中添加了。

var infowindow = new google.maps.InfoWindow({});
infowindow.close();

我正在使用 latitude & longitude 获取 json 数据：

[
    {"latitude":"23.046100780353495","longitude":"72.56860542227514"},
    {"latitude":"23.088427701737665","longitude":"72.49273109366186"},
    {"latitude":"23.061264193197644","longitude":"72.68224525381811"},
    {"latitude":"22.977212139977677","longitude":"72.52191352774389"},
    {"latitude":"23.002180435752084","longitude":"72.47590827872045"},
    {"latitude":"23.108638843843046","longitude":"72.49444770743139"}
]

Google 代码 Ajax:

google.maps.event.addListener(map, 'bounds_changed', function() {           

    var bounds =  map.getBounds();
    var ne = bounds.getNorthEast();
    var sw = bounds.getSouthWest();

    $.ajax({
        type: "POST",
        url: 'get-locations.php',
        data: 'ne='+ne+'&sw='+sw,
        success:function(data){

            var infowindow = new google.maps.InfoWindow({});

            var objects_array = JSON.parse(data); // This is an array of objects.
            var totalLocations = objects_array.length;

            for (var i = 0; i < totalLocations; i++) {
                var obj = objects_array[i]; // This is one object from the array.      

                // Init markers
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(obj.latitude, obj.longitude),
                    map: map,
                    icon: 'http://localhost/google/marker.png', // Default icon
                    title: obj.title
                });

                // Process multiple info windows
                (function(marker, i) {
                    // Add click event
                    google.maps.event.addListener(marker, 'click', function() {
                        //console.log(objects_array[i].info_data);
                        //infowindow.close();
                        infowindow = new google.maps.InfoWindow({
                            content: '<div class="MarkerPopUp"><div class = "MarkerContext">'+objects_array[i].info_data+'</div></div>'
                        });
                        infowindow.open(map, this);
                    });
                })(marker, i);

            }                   

        }
    });
});

知道如何做到这两点。如果你用我的例子指导我，我将不胜感激:)。

谢谢。

Answer 1

使用下面的代码清除所有标记。见 google help for marker

var markers = [];
var infowindow = null;
// Sets the map on all markers in the array.
function setAllMap(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}

 // Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setAllMap(null);
 }

google.maps.event.addListener(map, 'bounds_changed', function() {           

var bounds =  map.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();

$.ajax({
    type: "POST",
    url: 'get-locations.php',
    data: 'ne='+ne+'&sw='+sw,
    success:function(data){

        var infowindow = new google.maps.InfoWindow({});

        var objects_array = JSON.parse(data); // This is an array of objects.
        var totalLocations = objects_array.length;
        clearMarkers();  // clear all markers before addd new markers
        for (var i = 0; i < totalLocations; i++) {
            var obj = objects_array[i]; // This is one object from the array.      

            // Init markers
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(obj.latitude, obj.longitude),
                map: map,
                icon: 'http://localhost/google/marker.png', // Default icon
                title: obj.title
            });
         //// Add marker object to array .
            markers.push(marker);
            // Process multiple info windows
            (function(marker, i) {
                // Add click event
                google.maps.event.addListener(marker, 'click', function() {
                    if (infowindow) {
                        infowindow.close();
                    }
                    infowindow = new google.maps.InfoWindow({
                        content: '<div class="MarkerPopUp"><div class = "MarkerContext">'+objects_array[i].info_data+'</div></div>'
                    });
                    infowindow.open(map, this);
                });
            })(marker, i);

        }                   

    }
    });
  });

如何在边界更改时清除所有标记

How to clear all markers when bounds changed

ajax

jquery

google-maps

google-maps-api-3