UNIAPP H5调起手机地图应用或跳转网页版实现导航功能

55 篇文章 8 订阅
50 篇文章 0 订阅

在这里插入图片描述

需求:分析:用户通过点击选择使用百度还是高德地图,点击后调用guide方法,判断设备上是否有高德或者百度APP,有就直接调用APP,如果没有就调用网页版
效果:
在这里插入图片描述

地图插件:

<map :scale="14" :show-location="true" :show-compass="true" style="width: 100%; height: 200px;"
			:latitude="position.latitude" :longitude="position.longitude" :markers="markers" @markertap="handleOpen"
			@callouttap="handleOpen" />
position: {
	latitude: '',
	longitude: '',
	name: '标记点名称打开腾讯地图时按此内容搜索',
	address: '标记点地址'
},			

监控获取的经纬度:

computed: {
			markers() {
				const {
					longitude,
					latitude
				} = this.position;
				return [{
					id: 0,
					latitude, //纬度
					longitude, //经度
					iconPath: '', //显示的图标
					rotate: 0, // 旋转度数
					width: 15, //宽
					height: 15, //高
					title: '标记位置', //标注点名
					alpha: 0.5, //透明度
					callout: {
						//自定义标记点上方的气泡窗口 点击有效
						content: this.Destination.destination_dicname, //文本
						color: '#000', //文字颜色
						fontSize: 12, //文本大小
						borderRadius: 15, //边框圆角
						bgColor: '#fff', //背景颜色
						display: 'ALWAYS', //常显
					}
				}];
			}
		},

点击当前地图标点打开地图:

handleOpen() {
	console.log('打开地图');
	let that = this
	uni.showActionSheet({
		itemList: ['高德地图', '百度地图', '腾讯地图'],
		success: function(res) {
				that.guide(res.tapIndex)
		},
		fail: function(res) {
				console.log(res.errMsg);
		}
	});
	// wxSdk.openlocation(this.position);
},
guide(signMap) {
	uni.showLoading({
		title: '跳转中'
	});
	let { position } = this;
	if (position.name && position.name != '') {
	//景点位置position.name 景点经纬度lng lat
	var lng = position.longitude;
	var lat = position.latitude;
		if (signMap == 0) {
		    // 高德地图
			uni.getSystemInfo({
				success: (res) => {
					if (res.platform === "android") {
							window.location.href = "androidamap://viewMap?sourceApplication=appname&poiname=" + position.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
							//判断是否跳转
							setTimeout(function() {
									let hidden = window.document.hidden || window.document
.mozHidden || window.document.msHidden || window.document.webkitHidden
									if (typeof hidden == "undefined" || hidden == false) {
									//调用高德地图
									window.location.href =
												"https://uri.amap.com/marker?position=" + lng + "," + lat + "&name=" + position.name;
							        }
							}, 2000);
						} else {
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												"https://uri.amap.com/marker?position=" + lng + "," +
												lat + "&name=" + position.name;
										}
									}, 2000);
								}
							}
						})
					} else if (signMap == 1) {
						// 百度地图
						uni.getSystemInfo({
							success: (res) => {
								if (res.platform === "android") {
									let d = new Date();
									let t0 = d.getTime();
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//由于打开需要1~2秒,利用这个时间差来处理--打开app后,返回h5页面会出现页面变成app下载页面,影响用户体验
									var delay = setInterval(function() {
										var d = new Date();
										var t1 = d.getTime();
										if (t1 - t0 < 3000 && t1 - t0 > 2000) {
											window.location.href =
												"http://api.map.baidu.com/marker?location=" + lat +
												"," + lng + "&title=" + position.name +
												"&content=景点&output=html&src=webapp.baidu.openAPIdemo";
										}
										if (t1 - t0 >= 3000) {
											clearInterval(delay);
										}
									}, 1000);
								} else {
									let d = new Date();
									let t0 = d.getTime();
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//由于打开需要1~2秒,利用这个时间差来处理--打开app后,返回h5页面会出现页面变成app下载页面,影响用户体验
									let delay = setInterval(function() {
										var d = new Date();
										var t1 = d.getTime();
										if (t1 - t0 < 3000 && t1 - t0 > 2000) {
											window.location.href =
												"http://api.map.baidu.com/marker?location=" + lat +
												"," + lng + "&title=" + position.name +
												"&content=景点&output=html&src=webapp.baidu.openAPIdemo";
										}
										if (t1 - t0 >= 3000) {
											clearInterval(delay);
										}
									}, 1000);
								}
							}
						})
					} else {
						// 腾讯地图
						uni.getSystemInfo({
							success: (res) => {
								if (res.platform === "android") {
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用腾讯地图
											window.location.href =
												`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.name}`
										}
									}, 2000);
								} else {
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.name}`
										}
									}, 2000);
								}
							}
						})
					}
				} else {
					uni.showToast({
						title: '暂不知道该景区位置',
						icon: 'none',
						duration: 2000,
					});
				}
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
			},
  • 6
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值