51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

uniapp H5唤起手机地图软件

uniapp html5页面唤起手机地图app

<view @click="openMapHandle">
	<text class="location">地点</text>
	<text class="address">地址详情</text>
	<view class="btn" style="">去这里</view>
</view>
//选择打开的地图
const openMapHandle = () => {
	// //点击跳转地图
	// uni.openLocation({
	// 	latitude: latitude.value / 1,
	// 	longitude: longitude.value / 1,
	// 	name: name.value,
	// 	address: addr.value,
	// })
uni.showActionSheet({
	title: '请选择系统中已安装的地图应用导航',
	itemList: ['百度地图', '高德地图', '腾讯地图'],
	success: function(res) {
		console.log(62,res)
		openMap(res.tapIndex)
	},
	fail: function(res) {
		console.log(res.errMsg);
	}
});

}

//打开地图 const openMap = (tapIndex) => { uni.showLoading({ title: '跳转中' }); if (destination.value.name && destination.value.name != '') { //地点位置destination.value.name 地点经纬度lng lat var lng = destination.value.longitude; var lat = destination.value.latitude; if (tapIndex == 0) { // 百度地图 uni.getSystemInfo({ success: (res) => { let d = new Date(); let t0 = d.getTime(); window.location.href = "baidumap://map/marker?location=" + lat + "," + lng + "&title=" + destination.value.name + "&content="+ destination.value.address +"&traffic=on"; //百度 //由于打开需要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 = "https://api.map.baidu.com/marker?location=" + lat + "," + lng + "&title=" + destination.value.name + "&content=地点&output=html&src=webapp.baidu.openAPIdemo"; } if (t1 - t0 >= 3000) { clearInterval(delay); } }, 1000); } })

	} else if (tapIndex == 1) {
		// 高德地图
		uni.getSystemInfo({
			success: (res) =&gt; {
				if (res.platform === &quot;android&quot;) {
					window.location.href =
						&quot;androidamap://viewMap?sourceApplication=appname&amp;poiname=&quot; 
						+ destination.value.name + &quot;&amp;lat=&quot; + lat + &quot;&amp;lon=&quot; + lng + &quot;&amp;dev=0&quot;;
				} else {
					window.location.href =
						&quot;iosamap://viewMap?sourceApplication=appname&amp;poiname=&quot; 
						+ destination.value.name + &quot;&amp;lat=&quot; + lat + &quot;&amp;lon=&quot; + lng + &quot;&amp;dev=0&quot;;
				}
				//判断是否跳转
				setTimeout(function() {
					let hidden = window.document.hidden || window.document
					.mozHidden || window.document.msHidden || window.document
					.webkitHidden
					if (typeof hidden == &quot;undefined&quot; || hidden == false) {
						//调用高德地图
						window.location.href =
							&quot;https://uri.amap.com/marker?position=&quot; + lng + &quot;,&quot; +
							lat + &quot;&amp;name=&quot; + destination.value.name;
					}
				}, 2000);
			}
		})
	} else {
		// 腾讯地图
		uni.getSystemInfo({
			success: (res) =&gt; {
				window.location.href = &quot;qqmap://map/marker?marker=coord:&quot; + lat + &quot;,&quot; + lng + &quot;;title:&quot;
					+ destination.value.name + &quot;;addr:&quot;+ destination.value.address +&quot;&amp;referer=key&quot;;
				//判断是否跳转
				setTimeout(function() {
					let hidden = window.document.hidden || window.document
					.mozHidden || window.document.msHidden || window.document
					.webkitHidden
					if (typeof hidden == &quot;undefined&quot; || hidden == false) {
						//调用腾讯地图
						window.location.href =
							`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&amp;title:${destination.value.name}&amp;addr:${destination.value.address}`
					}
				}, 2000);
			}
		})
	}
} else {
	uni.showToast({
		title: '暂不知道该地点位置',
		icon: 'none',
		duration: 2000,
	});
}
setTimeout(function() {
	uni.hideLoading();
}, 2000);

}

赞(5)
未经允许不得转载:工具盒子 » uniapp H5唤起手机地图软件