如何在传单制作者群集中将标记居中？

Question

图标显示在蓝色底角。如何将其对准中心？通过CSS控制它不仅是一种形状。我有很多形状，每个看起来都不同。

使用以下代码创建集群：

this.stationMarkers = L.markerClusterGroup({
  iconCreateFunction: function (cluster) {
    const icons = [], temps = [];
    const markers = cluster.getAllChildMarkers();

    for (let i = 0; i < markers.length; i++) {
      if (markers[i]['Tavg']) temps.push((markers[i]['Tavg']));
      if (markers[i]['Icon']) icons.push((markers[i]['Icon']));
    }

    return L.divIcon({
      html: `<img src=\'./assets/images/icons-png/${icons.length > 0 ? math.mode(icons)[0] : ''}.png\'
              width="50px"/>
             <span>${(math.sum(temps) / temps.length).toFixed(1) + '°C'}</span>`,
    });
  },
});

并创建图标：

for (const d of this.data) {
  const icon = new L.DivIcon({
    html: `<img src='./assets/images/icons-png/${d.icon}.png' width="50px"/>
              <span>${d.Temp + '°C'}</span>`,
  });

  const marker = L.marker([d.Latitude, d.Longitude], {icon});
  marker['Tavg'] = d.Temp;
  marker['Icon'] = d.icon;

  this.stationMarkers.addLayer(marker);

  latitudes.push(d.Latitude);
  longitudes.push(d.Longitude);
}

包装：https://github.com/Leaflet/Leaflet.markercluster

示例：https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld-maxzoom.388.html

Answer 1

添加iconAnchor: [25, 25]可以解决此问题。

return L.divIcon({
  html: `<img src=\'./assets/images/icons-png/${icons.length > 0 ? math.mode(icons)[0] : ''}.png\'
          width="50px"/>
         <span>${(math.sum(temps) / temps.length).toFixed(1) + '°C'}</span>`,
  iconAnchor: [25, 25],
});

它并不总是在中心，但至少看起来比以前更好。

理想的解决方案是@kboul建议将多边形中心放置在该中心，但是不确定如何执行此操作，因为传单标记簇会创建多边形。