Question

我正在使用LeafletJS在地图上绘制出租房屋（也使用openstreetmap），我正在使用Leaflet.markercluster在标记集群上对这些标记进行分组，直到用户放大地图。

在分组图标上，我显示了在该群集中分组的租赁房屋的数量，并且当您将鼠标放在该分组图标上时，我想绘制一个圆圈。圆圈大小取决于分组的标记数量，我需要该圆圈的中心位于我的标记群集的相同位置。

我的问题是我无法获得群集标记的位置，我试图捕获onMouseOver事件，并且我得到它的位置是该组的第一个标记的位置。

在我的理想情况下，我需要所有分组标记中间的群集标记图标，该圆圈的半径将覆盖所有分组标记位置，但我现在的问题是，如何获取分组标记位置。 / p>

这是我的标记群集代码。

var markers = new L.MarkerClusterGroup(); 
for (var i = 0; i < addressPoints.length; i++) {
    var a = addressPoints[i];
    var title = a[2];
    var marker = L.marker(new L.LatLng(a[0], a[1]), {
        title: title
    });

    var htmlPopUp = '<div><span class="marker-count">'+title+'</span></div>';
    marker.bindPopup(htmlPopUp);
    markers.addLayer(marker);
}

map.addLayer(markers);
//Create circleMarker for on Hover
var circleMarker = L.circle([-9999,-9999], "-1").addTo(map);
markers.on('clustermouseover', function (a) {
  var circleRadius = a.layer.getAllChildMarkers().length *10000 / Math.pow(map.getZoom(), 3);
  circleMarker.setLatLng([a.layer._cLatLng.lat,a.layer._cLatLng.lng]);
  circleMarker.setRadius(circleRadius);
});

addressPoints包含标记的纬度和经度点

Answer 1

这应该很简单，请尝试：

echo $this->Html->script('/js/fileupload/jquery.ui.widget.js');

使用Leafletjs + markercluster插件

1 个答案: