ionic2实战-封装插件进行精确定位和导航
前言
- web端的定位是不准确的,在一些对定位要求不高的情况下可以用,比如只需要定位到城市用来查询天气
效果展示
封装插件进行精确定位和导航.gif
安装插件方式1:命令安装
安装定位插件
cordova plugin add https://github.com/yanxiaojun617/com.kit.cordova.amaplocation --save
安装导航插件.如果只需要定位,则不需要安装导航插件
cordova plugin add https://github.com/yanxiaojun617/com.kit.cordova.amapnavigation --save
安装效果图
安装插件方式2:手动安装
-
下载插件到本地,如下图点击Download Zip
-
解压.zip后.删掉文件夹目录
-master后缀
3.复制插件文件夹到app项目plugins目录下.此时插件已经安装完成,可以使用了
4.为了让插件集成的更完善.可以修改fetch.json和config.xml声明插件来源
"com.kit.cordova.amaplocation": {
"source": {
"type": "git",
"url": "https://github.com/yanxiaojun617/com.kit.cordova.amaplocation",
"subdir": "."
},
"is_top_level": true,
"variables": {}
}
<plugin name="com.kit.cordova.amaplocation" spec="https://github.com/yanxiaojun617/com.kit.cordova.amaplocation" />
获取key
- 在高德开发平台控制台添加Android和ios key
- Android平台key分debug key 和release key,对应debug Apk和release Apk
- 获取release key需要对app签名获得keystore文件,在开发调试阶段可以先只获取地图debug key,如下图红色字体标注.还需要注意的是,debug key每台电脑都不一样,如果另一位同事也要调试地图定位功能,则需要在他电脑上申请debug key
添加Android平台key
添加ios平台key
添加Android平台key
添加ios平台key
配置插件key
-
把申请的Android key填写到如下图位置
-
把申请的ios key填写到如下图位置
-
由于许多人还不会申请key,所以添加此gif,注意此gif只添加了android debug key.如果app已经有签名文件,就一并把release key申请了,如下图.
- 如果已经有了release keystore.则按如下方式申请正式版android key
还不会生成正式版keystore,看这里
最快捷的测试方法
declare var LocationPlugin;
test(){
LocationPlugin.getLocation(data => {
alert(JSON.stringify(data))
}, msg => {
alert(JSON.stringify(msg))
});
}
封装插件
如下图,创建一个provider封装插件,注意红色标注
/**
* Created by yanxiaojun617@163.com on 12-27.
*/
import {Injectable} from '@angular/core';
import {Platform} from 'ionic-angular';
declare var LocationPlugin;
declare var AMapNavigation;
@Injectable()
export class NativeService {
private loading;
constructor(private platform: Platform) {
}
/**
* 是否真机环境
* @return {boolean}
*/
isMobile() {
return this.platform.is('mobile') && !this.platform.is('mobileweb');
}
/**
* 获得用户当前坐标
* @return {Promise<T>}
*/
getUserLocation() {
return new Promise((resolve, reject) => {
if (this.isMobile()) {
LocationPlugin.getLocation(data => {
resolve({'lng': data.longitude, 'lat': data.latitude});
}, msg => {
console.error('定位错误消息' + msg);
alert(msg.indexOf('缺少定位权限') == -1 ? ('错误消息：' + msg) : '缺少定位权限，请在手机设置中开启');
reject('定位失败');
});
} else {
console.log('非手机环境,即测试环境返回固定坐标');
resolve({'lng': 113.350912, 'lat': 23.119495});
}
});
}
/**
* 地图导航
* @param startPoint 开始坐标
* @param endPoint 结束坐标
* @param type 0实时导航,1模拟导航,默认为模拟导航
* @return {Promise<T>}
*/
navigation(startPoint, endPoint, type = 1) {
return new Promise((resolve, reject) => {
if (this.platform.is('mobile') && !this.platform.is('mobileweb')) {
AMapNavigation.navigation({
lng: startPoint.lng,
lat: startPoint.lat
}, {
lng: endPoint.lng,
lat: endPoint.lat
}, type, function (message) {
resolve(message);//非手机环境,即测试环境返回固定坐标
}, function (message) {
alert('导航失败:' + message);
reject('导航失败');
});
} else {
console.log('非手机环境不能导航');
}
});
}
}
封装插件
在app中使用插件
-
在
app.module.ts中注入NativeServiceprovider
-
在组件中使用,更完整代码在github查看
常见问题
1.定位权限问题
使用cordova.plugins.diagnostic中的isLocationAuthorized方法可以判断app是否有定位权限.
使用cordova.plugins.diagnostic中的isLocationEnabled方法可以判断app是否开启位置服务.
根据这两个方法就可以友好的提示用户开启定位权限,目前我的app已经实现此功能,详情看NativeService.ts中getUserLocation方法
如果不想使用diagnostic插件判断这么复杂,那就给config.xml添加
<preference name="android-minSdkVersion" value="16" />
<preference name="android-maxSdkVersion" value="22"/>
<preference name="android-targetSdkVersion" value="22"/>
Android 6.0权限说明,Android 6.0系统默认为targetSdkVersion小于23的应用默认授予了所申请的所有权限,当targetSdkVersion大于23需要自己实现动态权限申请功能
2.导航功能和极光推送插件冲突
删除/plugins/cordova-plugin-jcore/plugin.xml中的引用
2.导航功能和cordova-sqlite-storage插件冲突
3.和插件冲突说明
- android查找.so文件会先看有没有arm64-v8a文件夹,如果没有该文件夹就去找armeabi-v7a文件夹，如果没有再去找armeabi文件夹.所以这三个文件夹有优先顺序.并且如果找到了就不再往下找了.
- 导航插件所有的.so文件都放在armeabi文件夹下,所以如果其他插件提供了arm64-v8a或者armeabi-v7a文件夹,那就找不到导航插件的.so文件了.所以导航功能会闪退
- 目前处理的方法就是不需要arm64-v8a和armeabi-v7a文件夹,具体操作就是注释其他插件plugin.xml中
target-dir="libs/arm64-v8a"和target-dir="libs/armeabi-v7a"的记录
