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> 

总结：由于第一次使用，测试有可能存在问题，使用过程中有问题可以及时联系我！