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) });
}

这样一来，插件就可以帮你解决问题，你可以根据该集群中存在的childMarkers数量来做一些奇特的东西。请参阅documentation和working example