關於JS接高德地圖API，以及坐標偏移坐標轉換

先說我自己的問題：

我做的是混合開發，就是原生的外殼H5的內在；

項目要求：把原來的百度地圖替換成高德地圖。

遇到問題：

 1.H5打開高德地圖APP，但是本H5頁面變化成地圖且返回不了，全靠物理鍵，但是蘋果哪里有返回物理鍵阿。

 2.坐標偏移，終點位置為百度坐標。

開始講述我的問題：

 一開始我覺得既然是H5就應該接js版的，官網傳送門http://lbs.amap.com/api/javascript-api/summary/

后來我又覺得不能在里邊寫但還算是web的，就寫了URI版的，官網傳送門http://lbs.amap.com/api/uri-api/summary/

后來咨詢了工單，找到了正確的入口，傳送送門http://lbs.amap.com/api/amap-mobile/summary/

不要嘲諷我，爸爸以前是做原生android的，繼續繼續。

這個就隨便插一下js，然后先拼接URI，隨便發送一下就成了，具體代碼如下。

  LGMapHelper.prototype.naviURI = function ( fromLat,fromLng,fromName,toLat,toLng,toName,isIos) {
        var iosUri='iosamap://path?sourceApplication=applicationName&sid=BGVIS1&slat='+fromLat+'&lon='+fromLng
        +'&sname='+fromName+'&did=BGVIS2&dlat='+toLat+'&dlon='+toLng+'&dname='+toName+'&dev=0&t=0';
        var androidUri='amapuri://route/plan/?sid=BGVIS1&slat='+fromLat+'&lon='+fromLng
        +'&sname='+fromName+'&did=BGVIS2&dlat='+toLat+'&dlon='+toLng+'&dname='+toName+'&dev=0&t=0';
        var protocol = isIos ? iosUri : androidUri;
        window.location.href=protocol;
        //location.href('baidumap://map/direction?origin=' + from + '&destination=' + to + '&mode=driving&src=webapp.navi.yourCompanyName.yourAppName');
        //return 'baidumap://map/direction?origin=' + from + '&destination=' + to + '&mode=driving&src=webapp.navi.yourCompanyName.yourAppName'
    };

為什么要判斷呢，因為是混合開發一套代碼兩個移動端使用。

以上就能調起高德APP，且本網頁無變化。

坐標偏移：沒什么坑，只有一個key，就是error/USERKEY_PLAT_NOMATCH這個錯誤。

先給傳送門http://lbs.amap.com/api/javascript-api/reference/lnglat-to-address

寫法為：

AMap.convertFrom(x+","+y,"baidu",
                    function(status,result){
                        if(status=="complete"){
                            toLng=result.locations[0].N;
                            toLat=result.locations[0].Q;
                            transform=true;
                            
                        }else{
                            console.log(status+"/"+result);
                            alert("獲取位置失敗,請重試");
                        }
                    });

然后踩坑的路就是：

先到傳送門http://lbs.amap.com/dev/key/app

 

 

 

 剩下的就是js引用時把你以前的key換成新創建的這個了。

 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=你的key"></script>

當然如果你沒有報這個錯誤error/USERKEY_PLAT_NOMATCH，完全不用換的蟹蟹。

 

好啦，這就是我剛剛學習H5的踩坑第一步。\(^o^)/~