图标标记不在中心。传单js

【问题标题】：Icon marker not center. Leaflet js图标标记不在中心。传单js
【发布时间】：2021-01-13 08:23:28
【问题描述】：

如何使标记图标居中。创建时，它会从单击的位置移开，并且当工具提示也显示时Screenshot

我的代码：

L.geoJSON(data,{
          pointToLayer: pointToLayer,
          //...
})

function pointToLayer(feature, latlng) {
    return L.marker(latlng, {icon: leafletIcon(feature)});
}
function leafletIcon(feature){
   if(condition)
     return L.icon({iconUrl: 'images/***.png'});
   else if(condition)
     return L.icon({iconUrl: 'images/***.png'});
}

【问题讨论】：

标签： javascript leaflet

【解决方案1】：

查看tutorial，您需要定义iconAnchor

如何找出正确的锚点：

在 latlng 上创建一个默认标记，并使用具有相同 latlng 的自定义图标创建一个。然后您会看到自定义图标需要向哪个方向移动，因为默认标记在 latlng 上正确居中。

var defaultMarker = L.marker([0,0]).addTo(map);
var customMarker  = L.marker([0,0],{icon: L.icon({iconUrl: 'images/***.png', iconAnchor: [-3,9], popupAnchor: [0,0], tooltipAnchor: [0,0]}) }).addTo(map);

【讨论】：