uniapp H5唤起手机地图软件

**uniapp html5页面唤起手机地图app**
```html
<view @click="openMapHandle">
	<text class="location">地点</text>
	<text class="address">地址详情</text>
	<view class="btn" style="">去这里</view>
</view>
```

```javascript
//选择打开的地图
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) => {
					if (res.platform === "android") {
						window.location.href =
							"androidamap://viewMap?sourceApplication=appname&poiname=" 
							+ destination.value.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
					} else {
						window.location.href =
							"iosamap://viewMap?sourceApplication=appname&poiname=" 
							+ destination.value.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=" + destination.value.name;
						}
					}, 2000);
				}
			})
		} else {
			// 腾讯地图
			uni.getSystemInfo({
				success: (res) => {
					window.location.href = "qqmap://map/marker?marker=coord:" + lat + "," + lng + ";title:"
						+ destination.value.name + ";addr:"+ destination.value.address +"&referer=key";
					//判断是否跳转
					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})&title:${destination.value.name}&addr:${destination.value.address}`
						}
					}, 2000);
				}
			})
		}
	} else {
		uni.showToast({
			title: '暂不知道该地点位置',
			icon: 'none',
			duration: 2000,
		});
	}
	setTimeout(function() {
		uni.hideLoading();
	}, 2000);
}
```

本文最后更新于 2024-05-28 10:50:37 并被添加「uniapp vue3 地图组件」标签，已有 1436 位童鞋阅读过。

本文作者：未来往事

本文链接：https://felixway.cn/post/701.html

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处

uniapp H5唤起手机地图软件

相关文章