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

Question

我正面临 Leaflet 的问题。 我在地图上有一堆标记（在我的例子中，它代表高尔夫球场）。 但是，当我放大/缩小时，标记在地图上移动。

浏览网页后，解决方案似乎是 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

您的iconAnchor应该是[13, 36]第一个是 iconSize 第一个参数的一半，第二个是全尺寸。 Alos 确保检查您没有在代码中的某处更改图标的大小

Answer 2

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

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