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;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();

转换成百度地图的经纬度，否则地图上显示的位置会不准确。