放大/縮小時傳單標記移動

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