ionic專案中使用cordova外掛跳轉第三方地圖APP(百度、高德)
阿新 • • 發佈:2019-02-04
最近公司專案需要使用到地圖導航(當然你可以使用到地圖APP的其他功能),沒有合適的導航外掛,只能選擇跳轉第三方完成此功能,所使用外掛是cordova封裝外掛。
第一步,需要安裝的cordova外掛:
cordova-plugin-device plugin for `device.platform` //判斷ios還是Android cordova plugin add cordova-plugin-appavailability --save //檢查地圖app是否存在 cordova plugin add cordova-plugin-inappbrowser //使用內建瀏覽器 cordova plugin add https://github.com/lampaa/com.lampa.startapp.git //跳轉第三方
以上跳轉第三方外掛地址(有詳細引數和使用說明)
第二步,修改config.xml檔案
//高德地圖
<allow-intent href="androidamap://*/*" /> //android
<allow-intent href="iosamap://*/*" /> //ios
//百度地圖
<allow-intent href="bdapp://*/*" /> //android
<allow-intent href="baidumap://*/*" /> //ios
第三方地圖官方API(包含你所需要跳轉路徑以及引數說明)
第三步,程式碼實現
(1)判斷ios還是android(未打包時會報錯,打包以後沒問題)
if(device.platform === 'iOS') {
//ios
}else if(device.platform === 'Android') {
//android
}
(2)檢測手機是否安裝該地圖APP,以及跳轉對應APP
高德地圖
let schemeIntent; // 地圖APP Package Name if(device.platform === 'iOS') { schemeIntent="iosamap://" }else if(device.platform === 'Android') { schemeIntent = 'com.autonavi.minimap'; }
appAvailability.check(schemeIntent,hasAndroidPackage,notAndroidPackage); //Android function hasAndroidPackage() { // 存在對應APP
var sApp = startApp.set({ //跳轉對應APP
"action":"ACTION_VIEW",
"category":"CATEGORY_DEFAULT",
"type":"text/css",
"package":"com.autonavi.minimap",
"uri":"amapuri://route/plan/?sid=BGVIS1&slat=39.92848272&slon=116.39560823&sname=A&did=BGVIS2&dlat=39.98848272&dlon=116.47560823&dname=B&dev=0&t=0", //我是選擇路徑規劃然後導航的,當然你也可以直接用導航路徑或者其他路徑
"flags":["FLAG_ACTIVITY_CLEAR_TOP","FLAG_ACTIVITY_CLEAR_TASK"],
"intentstart":"startActivity",
}, { /* extras */
"EXTRA_STREAM":"extraValue1",
"extraKey2":"extraValue2"
});
sApp.start(function() { //跳轉成功
alert("OK");
}, function(error) { //失敗
alert(error);
});
}
function notAndroidPackage()() { // 不存在對應APP
alert('請更換地圖APP或下載該地圖APP');
}
appAvailability.check(schemeIntent,hasIosPackage,notIosPackage); //IOS
function hasIosPackage() { // 存在對應APP
var sApp = startApp.set("iosamap://path?sourceApplication=applicationName&sid=BGVIS1&slat=39.92848272&slon=116.39560823&sname=A&did=BGVIS2&dlat=39.98848272&dlon=116.47560823&dname=B&dev=0&t=0");
sApp.start(function() {
alert("OK");
}, function(error) {
alert(error);
});
}
function notIosPackage()() { // 不存在對應APP
alert('請更換地圖APP或下載該地圖APP');
}
百度地圖(更換schemeIntent的值以及package和uri地址就可以)
存在問題:ios9以上系統需要配置白名單
配置示例
//在專案的Info.plist檔案配置
<key>LSApplicationQueriesSchemes</key>
<array>
<string>baidumap</string>
</array>
總結:由於第一次使用,測試有可能存在問題,使用過程中有問題可以及時聯絡我!