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

Question

我正在使用 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
} 

这是它的样子：

这 2 个组实际上只有 2 个标记：

然后，当点击它们中的每一个时：

我错过了什么？？

Answer 1

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

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

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