我正在使用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
}
外观如下:
这两个组实际上只是两个标记:
然后单击它们中的每个:
我想念什么?
不将弹出窗口添加到群集层。绑定到标记时,它已经被添加到地图中。
尝试删除添加它的行,看看它是否有效。
var popup = L.popup(
{
closeButton : false,
className : 'expat'
}
)
.setLatLng([latitude, longitude])
.setContent(userName);
选中此。您可以创建图层组并清除它https://www.youtube.com/watch?v=gEmOFsglk34&t=26s