（高德地圖）marker定位 bug 解決總結

項目背景：

　　一個項目bug，項目中用到高德地圖，默認打開頁面會生成一個marker（下圖紅色icon）,而後用戶拖動marker到想要的位置，而且保存。

用戶反映定位不許確，在當前頁面編輯的位置，到後臺打開位置就會有偏移。

 

   

 

由於後臺打開時候是根據經緯度生成的marker，通過檢查最終肯定是前臺頁面，拖動marker定位 獲取經緯度 那裏出的問題。

 

這裏不得不說下我的狀況，此項目是他人開發，而開發人員已經不在公司，bug轉發給我了。本身以前也沒怎麼使用太高德，主要使用的是谷歌地圖和mapbox。

在修改這個bug的時候，思緒會受谷歌api一些影響，由於一直以爲他們的api都差很少。

 

如今我打開本身的頁面，而後拖動marker，拖動結束我會打印一下經緯度，而後把這個經緯度複製下來，並在高德的官方地圖上去搜索獲取到的這個經緯度。

結果確實一直都是有誤差的，並且還誤差值每次都不一樣。

 

第一個想法：

    看了下代碼，發如今 生成 marker 的時候， 並無對自定義的 icon（紅色圖標）設置偏移，爲何要設置偏移呢，由於咱們在用這個 圖標 定位的時候，

是認爲這個 圖標的底部箭頭 指向的位置 是咱們要的位置。以下圖——

　　　　　　　　

    若是是用高德自帶的 圖標 ，圖標的箭頭就是指向的當前位置。而若是用自定義圖標的話，默認位置是定義在圖片畫布的左上角 也就是left:0;top:0;以下圖——

　　　　　　　　

    因此必需要爲自定義圖標設置偏移值，上圖的 圖標 大小是 寬36px 高 42px， 箭頭的位置是left:18px;top:38px,因此下面設置offset偏移是-18,-38

　　　　var marker = new AMap.Marker({
            icon: new AMap.Icon({
                size:new AMap.Size(36,42),//圖標大小  
                image:"/img/loc.png"
            }),
            //這裏用/img/loc.png圖片的left:18;top:38指向座標
            offset: new AMap.Pixel(-18,-38),
            position: map.gaode.map.getCenter(),
            draggable:true //點標記可拖拽
        });

 這樣， 當前的經緯度位置就是箭頭位置。
 
 順便這裏說下谷歌地圖，谷歌若是用自定義圖片，定位會在圖片中間最底部，以下圖：
　　　　 // 如下是谷歌的描述: By default, the anchor is located along the center point of the bottom of the image

 總之，根據圖片不一樣，仍是要考慮設置偏移值 無論是谷歌仍是高德。

 偏移值設置了後，發現仍然還有誤差。而後繼續思考。


第二個想法：
 其實最後發現問題很簡單， 在谷歌地圖上，無論怎麼移動 獲取到的經緯度 都是個人箭頭指向的位置，

 而高德不同，當我marker拖拽結束後 觸發的「拖拽結束」事件(dragend)，獲取的是鼠標位置的經緯度。
　　
 高德文檔————

　　　　

 拖拽 咱們的 marker 的時候，鼠標的位置是在 marker 上，可是並不必定在箭頭上， 因此無論箭頭指向哪裏，獲取到的永遠是鼠標指向
 位置的經緯度，因此會有誤差。
 
 解決方法以下：

　　AMap.event.addListener(marker, 'dragging', function(e){
        var lat = e.lnglat.lat,
            lng = e.lnglat.lng;
        marker.setPosition(new AMap.LngLat(lng,lat));

    });

      拖動過程當中，獲取當前鼠標的位置，而後把marker定位到鼠標的位置。

      這樣就解決了這個bug。

 

 結論：

     不一樣的地圖，確實是有一些不容易發現的差別，有時候看文檔，也會容易漏掉什麼。

     改他人bug，確實要比改本身bug麻煩一點。