HTML 元素稍微偏离中心

Question

我正在使用带有自定义 div 元素的 Leaflet Marker Cluster 插件来表示一个集群图标。当地图上的一组标记被聚类时，会出现一个聚类图标来代替它们。将鼠标悬停在集群图标上会在地图上显示一个多边形形状，指示集群图标所覆盖的区域。我希望图标位于多边形的中间。但是，它们似乎都略微位于中心的右下角。这是一张图片来说明我的意思。黑线形状表示多边形，红线表示多边形中间，蓝色圆圈表示集群图标。

Pic below :

在我的应用程序中，它们的蓝色圆圈都略微位于中心的右下角。我的集群图标的 CSS 是：

.marker-cluster-div {
    width: 40px;
    height: 40px;
    font-size: 12px;
    border-radius: 50%;
    color: black;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
}

是否有任何简单的方法可以将元素从其最初定位的位置向左和向上强制？

Answer 1

确保 .marker-cluster-div 的父元素具有相对位置并应用此 css：

.marker-cluster-div {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    left: 50%;
    margin-left: -20px;
    font-size: 12px;
    border-radius: 50%;
    color: black;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
}

Answer 2

在 Clustermarker 插件中使用自定义标记的正确方法是使用 iconCreateFunction，它可以在初始化 Clustermarker 时传入选项：

iconCreateFunction: function (cluster) {
    var markers = cluster.getAllChildMarkers();
    var n = 0;
    for (var i = 0; i < markers.length; i++) {
        n += markers[i].number;
    }
    return L.divIcon({ html: n, className: 'mycluster', iconSize: L.point(40, 40) });
}

这样，插件将为您提供繁重的工作，并且您可以根据该集群中存在的 childMarker 的数量来做一些花哨的事情。请参阅 documentation 和 working example