ionic3 应用内打开第三方地图导航 百度 高德

1.安装检测第三方APP是否存在的插件

cordova plugin add cordova-plugin-appavailability --save

npm install --save @ionic-native/app-availability                   这个可以根据项目的版本兼容性选择安装固定的版本号 我安装的是@3.4.2

在页面引入 AppAvailability 并进行判断  因为ios和android的包名不一样 所以进行了判断

import { AppAvailability } from '@ionic-native/app-availability';//检查是否安装了应用程序
import { Platform } from 'ionic-angular'; constructor( public appAvailability: AppAvailability,private platform: Platform,) {} ionViewDidLoad() {
//检测百度地图是否存在
if (this.platform.is('ios')) {
this.baiduapp = 'baidumap://';
} else if (this.platform.is('android')) {
this.baiduapp = 'com.baidu.BaiduMap';
}
this.appAvailability.check(this.baiduapp)
.then(
(yes: boolean) => {//有安装app
alert(this.baiduapp + ' is available')
},
(no: boolean) => {//没有安装app
alert(this.baiduapp + ' is NOT available')
}
);
//检测高德地图是否存在
if (this.platform.is('ios')) {
this.gaodeapp = 'autonavimap://';
} else if (this.platform.is('android')) {
this.gaodeapp = 'com.autonavi.minimap';
}
this.appAvailability.check(this.gaodeapp)
.then(
(yes: boolean) => {//有安装app
alert(this.gaodeapp + ' is available')
},
(no: boolean) => {//没有安装app
alert(this.gaodeapp + ' is NOT available')
}
); }

2.安装打开第三方APP的插件

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

安装成功后就可以开始使用了

declare var startApp; //在页面开头进行声明

//跳转百度地图
gobaidumap(){
//百度地图参数配置
let baiduApp = startApp.set(
{
"action":"ACTION_VIEW",
  "category":"CATEGORY_DEFAULT",
  "type":"text/css",
  "package":this.baiduapp,
  "uri":"baidumap://map/geocoder?location="+this.location.coordinates[1]+","+this.location.coordinates[0]+"&src=andr.baidu.openAPIdemo",
  "flags":["FLAG_ACTIVITY_CLEAR_TOP","FLAG_ACTIVITY_CLEAR_TASK"],
  "intentstart":"startActivity",
}, { /* extras */
"EXTRA_STREAM":"extraValue1",
"extraKey2":"extraValue2"
}
);
baiduApp.start(function(){
// alert('baidu ok')
},function(error){
alert(error)
})
}; //跳转高德地图
gogaodemap(){
//高德地图参数配置
let gaodeApp = startApp.set(
{
"action":"ACTION_VIEW",
  "category":"CATEGORY_DEFAULT",
  "type":"text/css",
  "package":this.gaodeapp,
  "uri":"androidamap://viewMap?sourceApplication=appname&poiname="+this.item.work_address+"&lat="+this.location.coordinates[1]+"&lon="+this.location.coordinates[0]+"&dev=0",
  "flags":["FLAG_ACTIVITY_CLEAR_TOP","FLAG_ACTIVITY_CLEAR_TASK"],
  "intentstart":"startActivity",
}, { /* extras */
"EXTRA_STREAM":"extraValue1",
"extraKey2":"extraValue2"
}
);
gaodeApp.start(function(){
// alert('gaode ok')
},function(error){
alert(error)
})
}

上面的 uri 参数可以有多种选择 导航、地图标注、路线规划 等等

注意:这两个地图传经纬度的时候 第一个是纬度 第二个是经度 (因为这个传反了 调了一天 晕~)

具体可以参考一下链接

百度:http://lbsyun.baidu.com/index.php?title=uri/api/android

高德:https://lbs.amap.com/api/amap-mobile/guide/android/navigation

 

上一篇:iOS_URI跳转方式多种地图导航的代码实践


下一篇:iOS开发之百度地图导航