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

在这里插入图片描述
当前项目是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)
		}
	})
}

相关推荐

  1. 小程序:页面

    2024-04-13 08:16:04       64 阅读
  2. uniapp app端app(高德地图/百度地图为例)

    2024-04-13 08:16:04       24 阅读
  3. 小程序页面方法

    2024-04-13 08:16:04       64 阅读
  4. 小程序之页面

    2024-04-13 08:16:04       34 阅读
  5. 小程序常见页面方式

    2024-04-13 08:16:04       37 阅读
  6. app 登录

    2024-04-13 08:16:04       43 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-13 08:16:04       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-13 08:16:04       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-13 08:16:04       87 阅读
  4. Python语言-面向对象

    2024-04-13 08:16:04       96 阅读

热门阅读

  1. Node.js 安装与配置

    2024-04-13 08:16:04       44 阅读
  2. OpenAI的Whisper

    2024-04-13 08:16:04       86 阅读
  3. 生活是否磨灭斗志:一场深度探讨

    2024-04-13 08:16:04       39 阅读
  4. Spring MVC 中的统一异常处理

    2024-04-13 08:16:04       45 阅读
  5. OpenAI的Whisper模型

    2024-04-13 08:16:04       41 阅读
  6. 【Redis】redis面试相关积累

    2024-04-13 08:16:04       37 阅读
  7. python内置函数enumerate()、eval()详解

    2024-04-13 08:16:04       39 阅读
  8. C++ primer 第十九章

    2024-04-13 08:16:04       34 阅读
  9. IP与TCP报文固定头部中的字段

    2024-04-13 08:16:04       38 阅读