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