1. 程式人生 > 其它 >高德地圖Marker縮放位置變化

高德地圖Marker縮放位置變化

我們在使用高德地圖js api開發時,會用到Marker類在地圖上來顯示一個地點的位置。如果我們使用預設設定或者設定出錯的時候:比如一個點在一條河的左邊,當地圖級別不停縮小的時候,這個點會慢慢的顯示在河的右邊,地圖級別放大的過程中相反。

這塊的問題其實跟 anchoroffset 有關係:

預設值

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

  1. achor使用api預設值('top-left')
  2. 如果icon大小為(10, 20),我們需要設定offset的值為 new AMap.Pixel(-5,-20)

解決方法n

  1. achor使用 'bottom-center'
  2. 如果icon大小為(10, 20),我們需要設定offset的值為 new AMap.Pixel(0,0)