湖州网站建设湖州,免费网站建设浩森宇特,wordpress 制作 文档 插件,返利网站做淘宝在ionic项目中#xff0c;如果想实现定位功能#xff0c;可以使用ng-cordova提供的cordova-plugin-geolocation。 但由于高墙的缘故#xff0c;国内andorid环境下#xff0c;此插件不起作用#xff08;ios环境下可用#xff09;。 国内比较好的是现实使用百度地图提供的A… 在ionic项目中如果想实现定位功能可以使用ng-cordova提供的cordova-plugin-geolocation。 但由于高墙的缘故国内andorid环境下此插件不起作用ios环境下可用。 国内比较好的是现实使用百度地图提供的API来实现定位以及地图的一系列扩展功能。 现在我们使用Weizhe He提供的cordova-qdc-baidu-location来尝试创建简单的定位app。 Stpe1:创建一个项目此处使用的是tab类型的项目创建方式可参照我前一篇如何离线创建Ionic1项目 Stpe2:申请百度地图API秘钥 应用类型请选择Andorid应用 包名如图所示的名字(config.xml内 widget节点中id的值) Stpe3:在项目中添加cordova-qdc-baidu-location插件 安装插件命令ionic plugin add https://github.com/hewz/cordova-baidu-location --variable API_KEY你的应用秘钥ps:卸载插件命令ionic plugin rm com.hewz.plugins.baidu.location列出所有插件ionic plugin list 安装完毕后可见下图内容 Stpe4:在项目中添加百度地图API的JS引用 打开Index.html 4.1 在head中添加代码 meta http-equivContent-Security-Policy contentscript-src * unsafe-eval; connect-src * unsafe-eval;object-src self; style-src * unsafe-inline; img-src * script typetext/javascript srchttp://api.map.baidu.com/api?v2.0ak你应用的秘钥/script 4.2 编写插件使用代码 4.2.1 打开www-templates-tab-dash.html修改代码为 ion-view view-title百度地图测试ion-contention-listion-itembutton classbutton button-block button-calm ng-clickgetpoint() 开始定位 /button/ion-itemion-item经度{{ret.longitude}} 纬度{{ret.latitude}}/ion-itemion-itemdiv idallmap styleheight: 600px;/div/ion-item/ion-list/ion-content
/ion-view 4.2.2 打开www-js-controllers.js修改[DashCtrl]代码为 .controller(DashCtrl, function($scope) {var map new BMap.Map(allmap); // 创建Map实例var point new BMap.Point(104.108164,30.773969); // 创建点坐标$scope.ret {latitude:30.773969, longitude:104.108164};map.centerAndZoom(point,19); // 初始化地图,用城市名设置地图中心点var marker new BMap.Marker(point); // 创建标注map.addOverlay(marker); // 将标注添加到地图中
$scope.getpoint function() {baidu_location.getCurrentPosition(function(data){$scope.ret {longitude:data.longitude, latitude:data.latitude};var map new BMap.Map(allmap); // 创建Map实例var point new BMap.Point(data.longitude, data.latitude); // 创建点坐标map.centerAndZoom(point,19);var marker new BMap.Marker(point); // 创建标注map.addOverlay(marker); // 将标注添加到地图中}, function(err){alert(错误 err)});};
}) Stpe5:测试 需要注意的是我们在浏览器测试项目的时候会提示baidu_location没有定义实际需要在手机上体验完整功能。 手机连接电脑后使用ionic小助手打开项目并真机调试直接将app安装到手机注意打开手机USB调试模式保持手机解锁并点亮ionic小助手编译安装完成可能经历一下几步 其他 百度地图API示例 特别感谢Weizhe He 转载于:https://www.cnblogs.com/larryNE/p/6066166.html
