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

標籤：發送   oid   orm   path   prototype   ios   appname   蘋果   company   

先說我自己的問題：

我做的是混合開發，就是原生的外殼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^)/~

 

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