phonegap+百度地圖導航（JS版）

 

使用phonegap+angularjs+ionic實現移動端的百度地圖JS版定位導航，可能會比較卡，僅供參考。

首先需要為你的phonegap項目加一個Gelolcation的插件，大概的步驟就是：使用dos命令進入到你的phonegap項目目錄，然后輸入以下命令：

cordova plugin add cordova-plugin-geolocation

看到提示安裝成功就可以了。

 

接下來去要去百度地圖API網站申請一個key，第一個JS引用會需要用到這個key。下面是需要引用的百度地圖JS:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的KEY"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

HTML的代碼

<div id="allmap" style="height: 400px;width:100%; margin-top: 0px"></div>

 

這里是該頁面控制器的代碼：

var endPoint={lon:"119.716005",lat:"30.642725"},    //終點坐標
    bm = new BMap.Map("allmap"),
    watchID;    //用來存放持續追蹤的監視Id

//地圖初始化
bm.centerAndZoom(new BMap.Point(endPoint.lon,endPoint.lat), 13);
bm.addControl(new BMap.NavigationControl());

//把真實坐標轉換成百度坐標
function translateCallback(point){
    var myP1 = new BMap.Point(point.lng,point.lat);    //起點
    var myP2 = new BMap.Point(endPoint.lon,endPoint.lat);    //終點
    var driving2 = new BMap.DrivingRoute(bm, {renderOptions:{map: bm, autoViewport: true}});    //路線實例
    driving2.search(myP1, myP2);    //顯示一條線路
}

//檢測設備是否支持定位功能
if(window.navigator.geolocation){
    var geolocation=window.navigator.geolocation;

    //每一次位置的變化，就獲取一次設備的位置，都會執行getPositionSuccess回調函數
    watchID= geolocation.watchPosition(getPositionSuccess,getPositionError);
}else{
    $rootScope.showAlert("您的應用程序不支持地理位置定位")
}

//終止watchPosition持續追蹤的方法
function stopWatch(){
    if(watchID){
        //調用clearWatch方法終止持續追蹤
        window.navigator.geolocation.clearWatch(watchID);
        watchID=null;
    }
}

//注冊destroy事件，離開此頁面時觸發
$scope.$on("$destroy",stopWatch);

//獲取用戶位置信息成功調用的方法
function getPositionSuccess(position){
    var lon=position.coords.longitude;  //讀取經度
    var lat=position.coords.latitude;   //讀取緯度
    console.log(123);
    //設置起點坐標
    var gpsPoint = new BMap.Point(lon,lat);  //119.69138,30.655101
    BMap.Convertor.translate(gpsPoint,0,translateCallback);//終點
}

//獲取用戶位置信息失敗調用的方法
function getPositionError(err){
    console.log(err);
    switch(err){
        case PositionError.TIMEOUT:
            $rootScope.showAlert("連接超時，請重試");
            break;
        case PositionError.PERMISSION_DENIED:
            $rootScope.showAlert("您拒接了使用位置共享服務");
            break;
        case PositionError.POSITION_UNAVAILABLE:
            $rootScope.showAlert("無法提供位置服務");
            break;
    }
}

 起點就是設備的位置，里面問題是真實經緯度需要使用

BMap.Convertor.translate();

轉換成百度地圖的經緯度，否則地圖上顯示的位置會不准確。