最近公司项目需要使用到地图导航(当然你可以使用到地图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() { // 存在对应APPvar 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>
版权声明:本文为padding_scater原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。