不使用自定義icon

不使用icon屬性，使用leaflet通用實例的默認圖標，不發生偏移。

使用自定義icon

我們在使用leaflet給地圖添加marker時自定義了marker的icon屬性。

var myIcon = L.icon({...})

聲明的myicon對象中使用了iconSize定義了icon圖標的像素大小。

iconSize: [40, 40],

The coordinates of the “tip” of the icon (relative to its top left
corner). The icon will be aligned so that this point is at the
marker’s geographical location. Centered by default if size is
specified, also can be set in CSS with negative margins.

這里定義了一個40*40大小的圖標，默認加入地圖定位點的是其左上角的錨點。就是說在這個圖標加入地圖時，它的左上角的錨點會覆蓋在地理坐標[50.505, 30.57]的定位點上，然后擴展他圖標的其他像素。

我這個圖標需要加入的錨點是圖標的底部中心。

所以要修改錨點坐標，即將錨點從左上修改為下中。

定義icon的iconAnchor

iconAnchor: [20, 40],

為什么是20而不是-20呢？
因為我們的地圖是不改變位置的，改變的是圖標的位置。
所以改變的是圖標的錨點位置。
講道理我也不懂，我也覺得應該下中往左上移的話，應該是[-20,40]。
不過測試過了，是[20,40]

完整代碼

L.icon代碼

var myIcon = L.icon({iconUrl: 'my-icon.png',iconSize: [40, 40],iconAnchor: [20, 40],popupAnchor: [-3, -76],shadowUrl: 'my-icon-shadow.png',shadowSize: [68, 95],shadowAnchor: [22, 94] });L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

總結

以上是生活随笔為你收集整理的leaflet添加marker出现偏移,修正方法-icon的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。