VUE_H5页面跳转第三方地图导航，兼容微信浏览器

最新推荐文章于 2024-05-20 16:43:18 发布

小歪 | 前端

最新推荐文章于 2024-05-20 16:43:18 发布

阅读量606

点赞数 3

分类专栏： # VUE # VUE3 # UNI-APP 文章标签： vue.js 微信前端

本文链接：https://blog.csdn.net/weixin_44599931/article/details/137682882

版权

VUE 同时被 3 个专栏收录

114 篇文章 3 订阅

订阅专栏

UNI-APP

114 篇文章 8 订阅

订阅专栏

11 篇文章 1 订阅

订阅专栏

本文介绍了在uniapp项目中，如何使用`uni.showActionSheet`展示地图应用选择功能，根据不同平台（iOS和Android）动态调用腾讯、百度或高德地图API，提供精准位置导航。

摘要由CSDN通过智能技术生成

在这里插入图片描述
当前项目是uniapp项目，若不是需要替换uni.showActionSheet选择api

onMap(address = '', organName = '', longitude = 0, latitude = 0){
	var ua = navigator.userAgent.toLowerCase();
	var isWeixin = ua.indexOf('micromessenger') != -1;
	if(isWeixin) {
		const mapUrl_tx = "http://apis.map.qq.com/uri/v1/marker?marker=coord:" + latitude + "," + longitude + ";title:" + organName + ";addr:" + address + "&referer=yellowpage";
		window.open(mapUrl_tx)
		return false
	}
	const actions = [{id:1, name: '腾讯地图' }, {id:2, name: '百度地图' }, {id:3, name: '高德地图' }]
	uni.showActionSheet({
		itemList: actions.map(item => item.name),
		success: (res)=> {
			let url = "";
			const u = navigator.userAgent;
			const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
			const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') >-1;
			let index = actions[res.tapIndex].id
			if(isAndroid){
				switch (index) {
					case 1:
						url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=H7JBZ-5WUWN-BHDFN-SEHOK-RREKF-I3BD5`;
						break;
					case 2:
						url = `baidumap://map/marker?location=${latitude},${longitude}&title=${address}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
						break;
					case 3:
						url = `androidamap://viewMap?sourceApplication=appname&poiname=${address}&lat=${latitude}&lon=${longitude}&dev=0`;
						break;
					default:
						break;
				}
				if (url != "") {
					window.open(url,"_blank")
				}
			}else if(isiOS){
				switch (index) {
					case 1:
						url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=H7JBZ-5WUWN-BHDFN-SEHOK-RREKF-I3BD5`;
						break;
					case 2:
						url = `baidumap://map/marker?location=${latitude},${longitude}&title=${address}&content=${address}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
						break;
					case 3:
						url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${address}&lat=${latitude}&lon=${longitude}&dev=0`;
						break;
					default:
						break;
				}
				if (url != "") {
					window.open(url,"_blank")
				}
			}
		},
		fail: function (res) {
			console.log(res.errMsg)
		}
	})
}