HTML元素稍微偏离中心

Question

I'm using the Leaflet Marker Cluster plugin with custom div elements to represent a cluster icon. When a group of markers on a map is clustered, a cluster icon appears in place of them. Hovering over the cluster icon reveals a polygon shape on the map indicating the area the cluster icon covers. I want the icons to sit in the middle of the polygon. However, they all seem to be slightly to the bottom right of the center. Here's an image to show what I mean. The black lined shapes indicate the polygon, the red lines where the middle of the polygon is and the blue circles are the cluster icons.

Pic below :

They blue circles are all slightly to the bottom right of the centre in my application. The CSS for my cluster icons is:

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

Is there any easy way to force an element to the left and up from where it was originally positioned?

Answer 1

Make sure the parent element of .marker-cluster-div has a relative position and apply this 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

The proper way to use custom markers in the Clustermarker plugin is by using the iconCreateFunction which can passed in the options when initializing your 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) });
}

That way the plugin will do you heavy lifting and you can do fancy stuff based on the amount of childMarkers present within that cluster. See the documentation and a working example