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

需求：分析：用户通过点击选择使用百度还是高德地图，点击后调用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.百度.com/marker?location="   lat  
												","   lng   "&title="   position.name  
												"&content=景点&output=html&src=webapp.百度.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.百度.com/marker?location="   lat  
												","   lng   "&title="   position.name  
												"&content=景点&output=html&src=webapp.百度.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);
			},

这篇好文章是转载于：学新通技术网