uniapp下各端调用三方地图导航

技术栈

• 开发框架： uniapp
• vue 版本： 2.x

需求

使用uniapp在app端(Android，IOS)中显示宿主机已有的三方导航应用，由用户自主选择使用哪家地图软件进行导航，选择后，自动将目标地址设为终点在导航页面。 使用uniapp在微信小程序中调用微信内置地图导航。

https://juejin.cn/post/7262941534528700453

https://blog.zhanghaoran.ren/article/html/uniappXiaGeDuanDiaoYongSanFangDiTuDaoHang.html

实现

微信小程序调用微信内置地图导航

使用uni.openLocation()方法可直接调用，微信比较简单

uni文档：https://uniapp.dcloud.net.cn/api/location/open-location.html

传值字段

名称	说明	是否必传
latitude	纬度，范围为-90~90，负数表示南纬，使用 gcj02 国测局坐标系	是
longitude	经度，范围为-180~180，负数表示西经，使用 gcj02 国测局坐标系	是
name	位置名称	非必传，但不传不显示目标地址名称
address	地址的详细说明	非必传，但不传不显示目标地址名称详情

具体代码

经纬度需转为float数据类型

uni.openLocation({
    latitude: parseFloat('地址纬度'),
    longitude: parseFloat('地址经度'),
    name: ‘地址名称,
    address: '地址详情',
    success: function (res) {
        console.log('打开系统位置地图成功')
    },
    fail: function (error) {
        console.log(error)
    }
})

app端调用宿主机三方地图导航

步骤：

1. 获取宿主机已安装的三方地图应用并显示，没有安装提示宿主机。
2. 根据宿主机选择的三方地图，打开对应的三方地图进行导航。

使用plus调用原生API知识点：

1. 获取宿主机系统环境

uniapp文档：https://uniapp.dcloud.net.cn/api/system/info.html#getsysteminfo

使用uniapp的uni.getSystemInfoSync().platform方法获取宿主机系统环境，结果为android、ios。

1. 获取宿主机是否安装某个应用

H5产业联盟文档：https://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.isApplicationExist

使用H5产业联盟中的 plus.runtime.isApplicationExist来判断宿主机是否安装指定应用，已安装返回True，

Android平台需要通过设置appInf的pname属性（包名）进行查询。 iOS平台需要通过设置appInf的action属性（Scheme）进行查询，在iOS9以后需要添加白名单才可查询，在manifest.json文件plus->distribute->apple->urlschemewhitelist节点下添加（如urlschemewhitelist:["weixin"]）。

调用示例

// Android
plus.runtime.isApplicationExist({pname: 'com.autonavi.minimap'})
// iOS
plus.runtime.isApplicationExist({action: 'iosamap://'})

1. 调用系统级选择菜单显示已安装地图列表

H5产业联盟文档：https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.actionSheet

调用示例

plus.nativeUI.actionSheet({ //选择菜单
    title: "选择地图应用",
    cancel: "取消",
    buttons: [
        {title: '1'},
        {title: '2'}
    ]
}, function (e) {
    console.log("您点击的是第几个："+e.index)
})

1. 打开三方某个应用

H5产业联盟文档：https://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.openURL

调用示例

// Android
plus.runtime.openURL('三方应用地址', function(res){
    // todo...
}, 'com.xxx.xxxapp');

// ios
plus.runtime.openURL('三方应用地址', function(res){
    // todo...
});

具体代码：

最终效果图

1. 微信

​​

1. app端

   ​​

​​

最后

参考链接： H5产业联盟：HTML5+ API Reference

                   uniapp: https://uniapp.dcloud.net.cn/api/

百度、高德、腾讯地图，三方APP调用其的文档。