1. 程式人生 > >ionic專案中使用cordova外掛跳轉第三方地圖APP(百度、高德)

ionic專案中使用cordova外掛跳轉第三方地圖APP(百度、高德)

最近公司專案需要使用到地圖導航(當然你可以使用到地圖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> 
總結:由於第一次使用,測試有可能存在問題,使用過程中有問題可以及時聯絡我!