地圖縮放后Marker偏移的問題


最近在做地圖開發,遇到一個小坑,記錄在這里。

按照高德地圖的文檔,初始化Marker(圖標)並將其放置到地圖上,示例如下:

 

var marker = new AMap.Marker({ icon: "http://www.easyicon.net/api/resizeApi.php?id=1185658&size=32", position: [120.1, 30.1] });

本以為就可以這樣簡簡單單地完成了,結果卻發現當地圖縮放的時候,圖標會有一個偏移。例如當地圖縮放比例很大的時候,某個圖標在大橋左側,放大之后卻到了大橋的右側。

百思不得其解之中,只能繼續查看高德的官方文檔,終於在這個頁面找到了答案。
http://lbs.amap.com/api/javascript-api/guide/draw-on-map/marker-point/

 

原來高德對圖標默認做了一個(-10,-34)的位移(以地圖左上角為原點),在不設置其他數值的情況下,圖標左側邊緣位於標識點左側10px的位置上。我項目中使用的圖標視覺上都是把圖標左下角當做標識點的,所以當地圖縮放比例很大的時候,10px對應的實際距離很大,也就是看上去會認為標識點發生了很大的向左的偏移。當地圖放大后,10px對應的實際距離就小了,向左的偏移就沒有那么大了。實際的感官就是標識點在放大過程中向右移動了(實質上都是偏左,只不過地圖放大之后偏左沒有那么多了)。

搞清楚原因之后,解決起來就很簡單了,只要在AMap.Marker初始化的時候添加offset屬性即可。我的圖標大小為26*26px,需要對齊圖標左下角,所以將offset設置成AMap.Pixel(0,-26),問題順利解決。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM