百度地圖/高德地圖大批量坐標轉換結果返回順序問題

轉載請註明出處：https://www.cnblogs.com/Joanna-Yan/p/9894712.html 

　　項目需求：設備採集到的GPS坐標信息，需提供實時、歷史軌跡的查看功能。這些點坐標除經緯度信息外還攜帶了其它的信息，比如：速度、方向、解狀態等。原始的GPS坐標需要轉換成百度地圖/高德地圖坐標後才能在相應的地圖上顯示，否則存在較大的位置偏差。

　　前端人員在高德地圖上顯示多個點坐標信息時，發現轉換後回來的坐標點沒法與該坐標點的其它信息對應。一直得不到解決。

幫忙查看，調試代碼。發現高德/百度地圖坐標轉換方法是非同步的，包括js api和http請求的uri方式。

https://lbs.amap.com/api/javascript-api/reference/lnglat-to-address#t2 

http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition

可以看到該方法不支持傳參的擴展和屬性附帶。所以通過將坐標的其它屬性附帶到坐標的非同步轉換方法，再通過結果一起帶回來的辦法是行不通了。

方法是非同步的，回調函數回調就會有時間延遲。如果按照for迴圈順序去提交轉換，其回調函數也不是順序執行的。

也就是說，你連續提交了1、2、3、4、5，5個GPS坐標，其回調函數的回調順序有可能是43521,或其他，是無需的。

一次性傳一組坐標進行轉換，回調返回結果的坐標數組裡面的順序也是改變了的。

最後通過遞歸解決。再次記錄下思路。

那麼我們如何保證返回結果有序？

　　我們可以一次性轉換一個GPS坐標，等回調函數回調成功後在地圖上添加覆蓋物，再進行下一個坐標的轉換。依次保證數據順序不會亂。

以高德地圖為例，用簡單的代碼模擬下：

<script type="text/javascript">
    var map = new AMap.Map('container', {
        zoom: 12,
        center: [121.532327,31.148761]
    });

    var a = [1,2,3,4,5,6,7,8];//模擬坐標解狀態
    var OnlineLinArr = [
           new AMap.LngLat(121.528,31.1509),
           new AMap.LngLat(121.428,31.1503),
           new AMap.LngLat(121.328,31.1505),
           new AMap.LngLat(121.468,31.1508),
           new AMap.LngLat(121.478,31.1506),
           new AMap.LngLat(121.488,31.1504),
           new AMap.LngLat(121.498,31.1502),
           new AMap.LngLat(121.418,31.1503),
       ];
     var k = 0;
        
    function convertFrom(LngLat){
        AMap.convertFrom(LngLat, 'gps',  (status, result) => {
            console.log(status);
            var OnlinelngX,OnlinelatY,OnlineGDlngX,OnlineGDlatY;
            if(result.info === 'ok'){
                var GDlinArr = result.locations;
                for (var i = 0; i < GDlinArr.length; i++) {
                    OnlineGDlngX = GDlinArr[i].lng;
                    OnlineGDlatY = GDlinArr[i].lat;
                }
                
            }
            
            if(status === 'complete'){
                if(k < OnlineLinArr.length-1){
                    var j = ++k;
                    console.log(a[j]);
                    convertFrom(OnlineLinArr[j]);

                    if(a[j] == 1){
                        ImgFunc('red.png',OnlineGDlngX,OnlineGDlatY);
                    }else if(a[j] == 2){
                        ImgFunc('green.png',OnlineGDlngX,OnlineGDlatY);
                    }else{
                          ImgFunc('startpoint.png',OnlineGDlngX,OnlineGDlatY);
                    }
                }
            }
        });
    }
    convertFrom(OnlineLinArr[k]);
    console.log(a[k]);

   function ImgFunc (img,x,y) {
        var marker = new AMap.Marker({
            map:map,
            position:new AMap.LngLat(x, y), 
            icon:img,  
            // autoRotation:true,
        });
    }     
</script>

如果此文對您有幫助，微信打賞我一下吧~