使用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();
转换成百度地图的经纬度,否则地图上显示的位置会不准确。
原文:http://www.cnblogs.com/yuzuoxiang/p/5053998.html