Question

我正在向你求助，因为我已经困住了几个小时的问题而且我没有发现这个问题的结束...... 每当我的标记列表在访问者在地图上移动时更新，标记就会添加到已添加的标记之上。我尝试了几种方法在更新前删除所有标记但没有成功。

这是我的initialize功能：

function initalize() {
    // Creating a new map
    var mapDiv = document.getElementById("googlemap");
    mapCanvas = new google.maps.Map(mapDiv, {
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        noClear : true
    });

    var latlng = new google.maps.LatLng(49, 2);

    // Add a control
    // Generate bunch markers
    var sw = new google.maps.LatLng(-19.,-152.);
    var ne = new google.maps.LatLng(76,58 );
    var bounds = new google.maps.LatLngBounds(sw, ne);
    mapCanvas.setCenter(latlng);
    mapCanvas.setZoom(10);

    var lat, lng, category, json = [];
    var categories = ["cat1", "cat2", "cat3"];

    // Creating a global infoWindow object that will be reused by all markers
    infoWnd = new google.maps.InfoWindow();

    // Marker Clusterer setup
    clusterer.cat1 = new MarkerClusterer(mapCanvas, [], mcOptions);
    clusterer.cat2 = new MarkerClusterer(mapCanvas, [], mcOptions);
    clusterer.cat3 = new MarkerClusterer(mapCanvas, [], mcOptions);

    google.maps.event.addListener(mapCanvas, 'tilesloaded', function () {
        loadMapFromCurrentBounds(mapCanvas);
    }); 


    google.maps.event.addListener(mapCanvas, 'rightclick', function(event) {
        placeMarker(event.latLng, mapCanvas);
    });

    google.maps.event.addListener(mapCanvas, 'click', function() {
        infoWnd.close();
    });

}

当加载地图时，调用loadMapFromCurrentBounds函数：

function loadMapFromCurrentBounds(map) 
{

    // We first remove the markers before updating
    for(var i=0; i < markers.length; i++){
        markers[i].setMap(null);
    }
    markers = new Array();

    // First, determine the map bounds
    var bounds = map.getBounds();

    // Then the points
    var swPoint = bounds.getSouthWest();
    var nePoint = bounds.getNorthEast();

    // Now, each individual coordinate
    var swLat = swPoint.lat();
    var swLng = swPoint.lng();
    var neLat = nePoint.lat();
    var neLng = nePoint.lng();

    var radius = google.maps.geometry.spherical.computeDistanceBetween(swPoint, nePoint);
    var center = map.getCenter();

    var searchUrl = 'searchdatabase.php5?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;

    downloadUrl(searchUrl, function(data) {

        var xml = parseXml(data);
        var markerNodes = xml.documentElement.getElementsByTagName("marker");

        var bounds1 = new google.maps.LatLngBounds();

        for (var i = 0; i < markerNodes.length; i++) 
        {
            var categorie = markerNodes[i].getAttribute("categorie");
            var name = markerNodes[i].getAttribute("name");
            var address = markerNodes[i].getAttribute("address");
            //var icon = markerNodes[i].getAttribute("typeicon");
            var distance = parseFloat(markerNodes[i].getAttribute("distance"));
            var latlng = new google.maps.LatLng(
                parseFloat(markerNodes[i].getAttribute("lat")),
                parseFloat(markerNodes[i].getAttribute("lng"))
            );

             if ( categorie in markers == false) {
                markers[categorie] = [];
              }

            var marker = createMarker({
                idvar : idvar,
                idtypelieu : TypeLieu[categorie],   
                position : latlng,
                title : name,
                // draggable: true,
                icon : categoryIcons[categorie],
                description : address,
                categorie : categorie,
            });
        }
    })
}

这是createMarker函数：

function createMarker(options) 
{

    var marker = new google.maps.Marker(options);

    google.maps.event.addListener(marker, "click", function(){
      infoWnd.setContent(options.description);
      infoWnd.open(mapCanvas, marker);
    });

    if(mapCanvas.getBounds().contains(marker.getPosition()))
    {
        var lacategorie = options.categorie;

        $("#"+lacategorie).append("<span class=SubList><a href=Lieu-" +options.idvar+ "-"+options.idtypelieu+"-1.html>" + options.title + "</a></span>");

    }


    markers[options.categorie].push(marker);
    return marker;
}

所以我的问题是，每次在用户放大或移动地图时调用loadMapFromCurrentBounds时，都会添加标记但不替换前一个标记，因此每个集群在更新时递增，并且标记是叠加的。

我已经尝试了几种方法来移除标记，但没有成功。

有人可以帮我找到我的错误吗？

Answer 1

试试这个

while (markers.length > 0) {
    markers.pop().setMap(null);
}
markers.length = 0;

不要将标记设置为新数组，而是尝试将长度设置为0.这就是我在代码中清除标记的方法，它对我有效。

而不是

markers[options.categorie].push(marker);

成功

markers.push(marker);

Answer 2

https://developers.google.com/maps/documentation/javascript/examples/marker-remove

您可以找到如何删除标记...

（或）

while (markers.length > 0) {
    markers.pop().setMap(null);
}
markers.length = 0;

Answer 3

确保您的markersArray是全局变量，然后您可以随时使用以下函数清除它。

function clearMarkers(markersArray) {
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(null);
        }
    }
}

Google Map V3在更新前删除标记

3 个答案: