關於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^)/~