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

マーカー配列がグローバル変数であることを確認してください。その後、次の関数を使用していつでもクリアできます。

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