0

我正在向您寻求帮助，因为我在一个问题上停留了几个小时，但我没有找到这个问题的结束......每次当访客在地图上移动时更新我的​​标记列表时，都会添加标记在那些已经添加的之上。我尝试了几种方法在更新之前删除所有标记，但没有成功。

这是我的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在用户放大或移动地图时调用，都会添加标记但不会替换前一个，因此每个集群在更新时都会增加，并且标记会叠加。

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

有人可以帮我找出我的错误在哪里吗？

4

3 回答 3

1

尝试这个

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

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

代替

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

做了

markers.push(marker);
于 2013-11-08T14:52:24.750 回答
0

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

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

（或者）

while (markers.length > 0) {
    markers.pop().setMap(null);
}
markers.length = 0;
于 2013-11-08T14:55:46.297 回答
0

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

function clearMarkers(markersArray) {
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(null);
        }
    }
}
于 2013-11-08T16:12:32.720 回答