Question

我正在学习传单。我的想法是用集群创建地图一切正常，但当我移动地图时，新的标记保持不变覆盖旧的。我可以看到每次移动地图标记变得更大胆，所以我认为它们相互叠加。

如何删除旧的？我尝试了一切，无法弄清楚，

这是代码：

var map;
var ajaxRequest;
var plotlist;
var plotlayers=[];
var marker;

var clusters = {};  // key is lat/lon, value is a L.MarkerClusterGroup
var nodecounts = {};// key is lat/lon, value is the number of nodes at that location
var markers = {};   // key is plot id, value is an L.Marker


// Browsable map

function initMap(lat,lon,zoom){
    // set up the AJAX stuff
    ajaxRequest=GetXmlHttpObject();
    if (ajaxRequest==null) { return; }

    // set up the map
    map = new L.Map('map');
    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib='Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
    var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 20, attribution: osmAttrib});       

    if (!lat) { lat=44.3008813; lon=-79.6114973; zoom=14; }
    map.setView(new L.LatLng(lat,lon),zoom);
    map.addLayer(osm);
    askForPlots();
    map.on('moveend', onMapMove);
}

function askForPlots() {
    // request the marker info with AJAX for the current bounds
    var bounds=map.getBounds();
    var minll=bounds.getSouthWest();
    var maxll=bounds.getNorthEast();


    $("#regTitle").html("Hello World");
    $("#listings").load('/engine/boxlistings.php?w='+minll.lng+'&s='+minll.lat+'&e='+maxll.lng+'&n='+maxll.lat); 
    var msg='/engine/box.php?w='+minll.lng+'&s='+minll.lat+'&e='+maxll.lng+'&n='+maxll.lat;
    ajaxRequest.onreadystatechange = gotPlots;
    ajaxRequest.open('GET', msg, true);
    ajaxRequest.send(null); 



}

function onMapMove(e) {
    askForPlots();
}

function gotPlots() {
    if (ajaxRequest.readyState!=4 || ajaxRequest.status!=200) return;
    var resp = JSON.parse(ajaxRequest.responseText);//.replace(/[^\u000A\u0020-\u007E]/g, "")
    var plotlist = resp.plots;

    // First, tot up the number at each position, so we know whether to cluster
    for (var i=0; i<plotlist.length; i++) {
        var plot = plotlist[i];
        if (markers[plot.id]) continue;

        var ll = new L.LatLng(plot.lat,plot.lon, true);
        var key= locationKey(ll);
        nodecounts[key] = (nodecounts[key] || 0) + 1;
    }




    // Custom 
    var mapcluster = L.markerClusterGroup({ chunkedLoading: true,maxClusterRadius:60 });
    for (var i = 0; i < plotlist.length; i++) {
        var a = plotlist[i];
        var title = a.name;
        var marker = L.marker(L.latLng(a.lat, a.lon), { 

            icon: new L.DivIcon({
                className: 'tooltips',
                html: ''+
            '<div class="triangle" id="'+a.id+'"><strong>'+a.price+'</strong></div>'
            })



         });
        marker.bindPopup(title);
        mapcluster.addLayer(marker);
    }
    map.addLayer(mapcluster);
    console.log(mapcluster);

}



function locationKey(ll) { return ll.lat.toFixed(5)+","+ll.lng.toFixed(5); }

// Single plot map


// AJAX support

function GetXmlHttpObject() {
    if (window.XMLHttpRequest) { return new XMLHttpRequest(); }
    if (window.ActiveXObject)  { return new ActiveXObject("Microsoft.XMLHTTP"); }
    return null;
}

任何帮助表示赞赏

Answer 1

我使用这个功能：

function removeMarkers() {
    map.eachLayer(function (layer) {
        layer.remove();
    });
}

但它也删除了地图，所以我跟着：

L.imageOverlay(imageUrl, imageBounds).addTo(map);

标记在每个移动地图上保留叠加

1 个答案: