使用Leaflet和Markercluster在每个聚类上获取重复的标记。

问题描述 投票:0回答:2

我正在使用Leaflet和Markercluster构建和应用。

截至目前,我设法在MarkerClusterGroup中获得了这些标记,但是它们在地图中看起来是重复的,并且每个标记都在不同的群集组中(??)。

这是到目前为止的代码:

var cluster = new L.MarkerClusterGroup();

if (!viewingAllRoutes) {

    var popupMain = L.popup(
        {
            closeButton : false,
            className : 'expat-detail'   
        }
    )
    .setLatLng([latitude, longitude])
    .setContent("TEST")
    .openOn(map);

    if (finalLocation) {
        gpstrackerMarker = new L.marker(new L.LatLng(latitude, longitude), {title: title, icon: markerIcon, zIndexOffset: 999}).bindPopup(popupMain).addTo(map);
    } else {
        gpstrackerMarker = new L.marker(new L.LatLng(latitude, longitude), {title: title, icon: markerIcon}).bindPopup(popupWindowText).addTo(map);
    }
}

if (viewingAllRoutes) {

    var popup = L.popup(
        {
            closeButton : false,
            className : 'expat'   
        }
    )
    .setLatLng([latitude, longitude])
    .setContent(userName)
    .addTo(cluster);

    gpstrackerMarker = new L.marker(new L.LatLng(latitude, longitude), {title: title, icon: markerIcon, zIndexOffset: 999}).bindPopup(popup).addTo(cluster);

    map.addLayer(cluster);

    gpstrackerMarker.on("click", function() {        
        var url = 'getrouteformap.php?sessionid=' + sessionID;

        viewingAllRoutes = false;

        var indexOfRouteInRouteSelectDropdwon = sessionIDArray.indexOf(sessionID) + 1;
        routeSelect.selectedIndex = indexOfRouteInRouteSelectDropdwon;

        if (autoRefresh) {
            restartInterval(); 
        }

        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                loadGPSLocations(data);
            },
            error: function (xhr, status, errorThrown) {
                console.log("status: " + xhr.status);
                console.log("errorThrown: " + errorThrown);
            }
         });
    }); // on click
} 

外观如下:

这两个组实际上只是两个标记:

enter image description here

然后单击它们中的每个:

enter image description here

enter image description here

我想念什么?

javascript jquery arrays leaflet markerclusterer
2个回答
0
投票

不将弹出窗口添加到群集层。绑定到标记时,它已经被添加到地图中。

尝试删除添加它的行,看看它是否有效。

var popup = L.popup(
    {
        closeButton : false,
        className : 'expat'   
    }
)
.setLatLng([latitude, longitude])
.setContent(userName);

0
投票

选中此。您可以创建图层组并清除它https://www.youtube.com/watch?v=gEmOFsglk34&t=26s

© www.soinside.com 2019 - 2024. All rights reserved.