javascript - 放大/缩小时传单标记移动

Question

我在使用 Leaflet 时遇到问题。我在 map 上找到了一堆标记(在我的例子中它代表高尔夫球场)。但是，当我放大/缩小时，标记在 map 上移动。

浏览网页后，解决方案似乎是 iconAnchor 属性。就我而言，问题仍然相同(我尝试了很多 iconAnchor 组合)，并且我看不出问题来自何处。

有人可以帮忙吗？

谢谢

(到目前为止，在我的代码下面。我正在 Ruby on Rails 框架中工作以获取信息)

let customIcon = new L.Icon({
    iconUrl: '<%= image_path("map_marker.png") %>',
    iconSize:     [26, 36]
    iconAnchor:   [13, 18]
    popupAnchor:  [0, -28]
});

for(let i = 0; i < gon.golfs.length; i++){
    let marker = L.marker([gon.golfs[i].lat, gon.golfs[i].long], {icon: 
    customIcon}).addTo(mymap);
    marker.bindPopup(gon.golfs[i].name.link("golfs/"+gon.golfs[i].id));
};

Answer 1

当标记在放大/缩小时发生变化时，这表明您的标记尚未调整大小，您应该使用下面的代码设置标记大小。

import icon from "leaflet/dist/images/marker-icon.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";
let DefaultIcon = L.icon({
  iconUrl: icon,
  shadowUrl: iconShadow,
  iconSize: [24, 36],
  iconAnchor: [12, 36],
});