当前位置: 代码迷 >> 综合 >> ionic+cordova项目打开外部地图(高德+百度)
  详细解决方案

ionic+cordova项目打开外部地图(高德+百度)

热度:66   发布时间:2023-11-05 00:19:40.0

首先是两个打开外部地图App用到的插件

检查用户设备上是否已安装指定的 APP:

ionic cordova plugin add cordova-plugin-appavailability

npm install --save @ionic-native/app-availability

检查或启动第三方 APP:

cordova plugin add https://github.com/lampaa/com.lampa.startapp.git

 首先检测用户是否安装百度地图和高德地图,因为项目中既有android又有ios双平台,所以就先判断一下。

/*检测高德地图*/
openGdMap() {var app = '';if (this.platform.is('ios')) {app = 'iosamap://';/* Scheme URL */} else if (this.platform.is('android')) {app = 'com.autonavi.minimap';/* 安卓包名 */}this.appAvailability.check(app)     /* 检测是否已安装 */.then((yes: boolean) => {this.flaggd = true;},(no: boolean) => {this.flaggd = false;});}/*检测是否有百度地图*/
openBMap() {var app = '';if (this.platform.is('ios')) {app = 'baidumap://';/* 百度的Scheme URL */} else if (this.platform.is('android')) {app = 'com.baidu.BaiduMap';/* 百度的安卓包名 */}this.appAvailability.check(app)     /* 检测百度地图是否已安装 */.then((yes: boolean) => {this.flagbd = true;},(no: boolean) => {this.flagbd = false;});
}

如果安装的话,参考百度地图高德地图的API,写打开外部地图 的方法,同样项目需要,打开的方法适配了ios和android,注意ios和android的调用方法不一样,仔细看API。注意URI的路径,这个做的是传一个经纬度然后打开地图进行步行导航。

/*打开高德地图App*/
openGd() {var bd_lng = parseFloat(this.checklontitude);var bd_lat = parseFloat(this.checklatitude);// 百度坐标转高德var X_PI = Math.PI * 3000.0 / 180.0;var x = bd_lng - 0.0065;var y = bd_lat - 0.006;var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);var gg_lng = z * Math.cos(theta);var gg_lat = z * Math.sin(theta);let mypackage = '';let uri = "";if (this.platform.is('ios')) {mypackage = 'iosamap://';uri = "iosamap://viewMap?sourceApplication=sharebook&poiname=A&lat=39.98848272&lon=116.47560823&dev=1";var sApp = startApp.set(uri);sApp.start(function () {console.log("OK");}, function (error) {alert("打开失败,请重试");});/* 百度的Scheme URL */} else if (this.platform.is('android')) {mypackage = 'com.autonavi.minimap';uri = "amapuri://route/plan/?sourceApplication=softname&dlat=" + gg_lat + "&dlon=" + gg_lng + "&dname=" + this.case_address + "&dev=0&t=2";/* 百度的安卓包名 */var sApp = startApp.set({/* params */"action": "ACTION_VIEW","category": "CATEGORY_DEFAULT","type": "text/css","package": mypackage,"uri": uri,"flags": ["FLAG_ACTIVITY_CLEAR_TOP", "FLAG_ACTIVITY_CLEAR_TASK"],"intentstart": "startActivity",});sApp.start(function () {console.log("OK");}, function (error) {alert("打开失败,请重试");});}}/*打开百度地图App*/
openBd() {let scheme = "com.baidu.BaiduMap";// 反向地址解析,和正常经纬度位置相反var str = this.checklatitude + "," + this.checklontitude;let mypackage = '';let uri = "";if (this.platform.is('ios')) {uri = "baidumap://map/direction?origin=" + str + "destination=" + str + "&mode=walking&src=ios.baidu.openAPIdemo";/* 百度的Scheme URL */var sApp = startApp.set(uri);sApp.start(function () {console.log("OK");}, function (error) {alert("打开失败,请重试");});} else if (this.platform.is('android')) {mypackage = 'com.baidu.BaiduMap';uri = "baidumap://map/direction?src=openApiDemo&destination=name:" + this.case_address + "|latlng:" + str + "&mode=walking";/* 百度的安卓包名 */var sApp = startApp.set({/* params */"action": "ACTION_VIEW","category": "CATEGORY_DEFAULT","type": "text/css","package": mypackage,"uri": uri,"flags": ["FLAG_ACTIVITY_CLEAR_TOP", "FLAG_ACTIVITY_CLEAR_TASK"],"intentstart": "startActivity",});sApp.start(function () {console.log("OK");}, function (error) {alert("打开失败,请重试");});}
}

其中startApp引用要在import下面声明一下:

declare let startApp: any;//打开外部App
  相关解决方案