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