uniapp中适合各端调用第三方地图导航

相关的技术栈 uniapp  +   vue2

需求

在uniapp中可以进行搜索位置进行导航，会自动读取用户已有导航应用，并且由用户自主选择使用哪家地图进行导航，自动将目标地址设为终点在导航页面。

实现步骤：

uniapp文档中uni.openLocation()方法可直接调用，uni文档：uni.openLocation(OBJECT) | uni-app官网

示例代码：

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

调用宿主机三方地图导航:

步骤：

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

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

        1. 获取宿主机系统环境

                uniapp文档：系统信息的概念 | uni-app官网

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

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

                H5产业联盟文档：HTML5+ API Reference

                使用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://'})

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

                  H5产业联盟文档：HTML5+ API Reference

调用示例

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

4.打开三方某个应用

         H5产业联盟文档：HTML5+ API Reference

调用示例

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

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

具体代码：

<template>
	<view @click.stop="handleNavigation">导航</view>
</template>

<script>
	export default {
		data() {
			return {
				// 目标纬度  必填
				latitude: '',
				// 目标经度  必填
				longitude: '',
				// 目标地址名称
				name: '',
				// 目标地址详细信息
				address: '',
				// 我自己的位置经纬度（百度地图需要传入自己的经纬度进行导航）
				selfLocation: {
					latitude: '',
					longitude: ''
				}
			}
		},
		methods: {
			handleNavigation() {
				const _this = this
				if (!this.latitude || !this.longitude || !this.name) return
				// 微信
				// #ifdef MP-WEIXIN
				let _obj = {
					latitude: parseFloat(this.latitude),
					longitude: parseFloat(this.longitude),
					name: this.name,
				}
				if (this.address) {
					_obj['address'] = this.address
				}
				uni.openLocation({
					..._obj,
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})
				// #endif

				// #ifdef APP-PLUS
				// 判断系统安装的地图应用有哪些, 并生成菜单按钮
				let _mapName = [{
						title: '高德地图',
						name: 'amap',
						androidName: 'com.autonavi.minimap',
						iosName: 'iosamap://'
					},
					{
						title: '百度地图',
						name: 'baidumap',
						androidName: 'com.baidu.BaiduMap',
						iosName: 'baidumap://'
					},
					{
						title: '腾讯地图',
						name: 'qqmap',
						androidName: 'com.tencent.map',
						iosName: 'qqmap://'
					},
				]
				// 根据真机有的地图软件 生成的 操作菜单
				let buttons = []
				let platform = uni.getSystemInfoSync().platform
				platform === 'android' && _mapName.forEach(item => {
					if (plus.runtime.isApplicationExist({
							pname: item.androidName
						})) {
						buttons.push(item)
					}
				})
				platform === 'ios' && _mapName.forEach(item => {
					console.log(item.iosName)
					if (plus.runtime.isApplicationExist({
							action: item.iosName
						})) {
						buttons.push(item)
					}
				})
				if (buttons.length) {
					plus.nativeUI.actionSheet({ //选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: buttons
					}, function(e) {
						let _map = buttons[e.index - 1]
						_this.openURL(_map, platform)
					})
				} else {
					uni.showToast({
						title: '请安装地图软件',
						icon: 'none'
					})
					return
				}
				// #endif
			},

			// 打开第三方程序实际应用
			openURL(map, platform) {
				let _defaultUrl = {
					android: {
						"amap": `amapuri://route/plan/?sid=&did=&dlat=${this.latitude}&dlon=${this.longitude}&dname=${this.name}&dev=0&t=0`,
						'qqmap': `qqmap://map/routeplan?type=drive&to=${this.name}&tocoord=${this.latitude},${this.longitude}&referer=fuxishan_uni_client`,
						'baidumap': `baidumap://map/direction?origin=${this.selfLocation.latitude},${this.selfLocation.longitude}&destination=name:${this.name}|latlng:${this.latitude},${this.longitude}&coord_type=wgs84&mode=driving&src=andr.baidu.openAPIdemo"`
					},
					ios: {
						"amap": `iosamap://path?sourceApplication=fuxishan_uni_client&dlat=${this.latitude}&dlon=${this.longitude}&dname=${this.name}&dev=0&t=0`,
						'qqmap': `qqmap://map/routeplan?type=drive&to=${this.name}&tocoord=${this.latitude},${this.longitude}&referer=fuxishan_uni_client`,
						'baidumap': `baidumap://map/direction?origin=${this.selfLocation.latitude},${this.selfLocation.longitude}&destination=name:${this.name}|latlng:${this.latitude},${this.longitude}&mode=driving&src=ios.baidu.openAPIdemo`
					}
				}
				let newurl = encodeURI(_defaultUrl[platform][map.name]);
				console.log(newurl)
				plus.runtime.openURL(newurl, function(res) {
					console.log(res)
					uni.showModal({
						content: res.message
					})
				}, map.androidName ? map.androidName : '');
			}

		}

	}
</script>