高德地圖Marker縮放位置變化
阿新 • • 發佈:2021-06-27
我們在使用高德地圖js api開發時,會用到Marker類在地圖上來顯示一個地點的位置。如果我們使用預設設定或者設定出錯的時候:比如一個點在一條河的左邊,當地圖級別不停縮小的時候,這個點會慢慢的顯示在河的右邊,地圖級別放大的過程中相反。
這塊的問題其實跟 anchor
和 offset
有關係:
預設值
achor: 'top-left'
offset: new AMap.Pixel(-10,-34)
仔細上圖中紅框中的marker表示:紅色為預設原點為'top-left'
(achor的預設值),藍色的方框為Icon
(官網demo中icon尺寸為20*34),需要將Icon的下邊的尖兒移到achor(0,0)的位置,Icon需要向右移動10,向上移動34,所以offset
new AMap.Pixel(-10,-34)
,解釋請看下圖:
解決方法1:
achor
使用api預設值('top-left')- 如果icon大小為(10, 20),我們需要設定
offset
的值為new AMap.Pixel(-5,-20)
解決方法n:
achor
使用 'bottom-center'- 如果icon大小為(10, 20),我們需要設定
offset
的值為new AMap.Pixel(0,0)