h5端地图导航

 微信扫码打开是腾讯地图，其他扫码打开是百度地图

首先这里的经纬度坐标和地点是从后台传过来的，后台是使用百度地图定位的，这里在腾讯地图里显示时就需要进行转换，具体知识点请参考这篇文章：JS不同地图坐标系经纬度转换（天地图、高德地图、百度地图、腾讯地图）_天地图坐标和高德地图坐标系-CSDN博客

（ 我的理解是有三种坐标标准，不同的坐标标准对应的坐标精度也会不同，所以要根据标准进行转换，以保证精准）

这里我会介绍两种方法，方法一是通过iframe直接链接引入，方法二是利用微信内置方法wx.openLocation唤起地图，这里第二种需要申请腾讯地图的key值，

建议使用方法二，因为方法一是在自己的域名下打开地图，这里跳百度地图软件会有一些问题

使用方法二直接在点击事件里面写就可以，不用单独新建一个页面，否则百度地图返回的时候会有一个空白页，此处是因为想显示的更清晰所以才放一个新页面展示。

方法一：参考的是这位博主的文章WEB端唤起 百度|腾讯|高德 地图一键导航功能_点击网页唤起百度地图并导航-CSDN博客

<template>
	<iframe v-if="iswexin" :src="'https://3gimg.qq.com/lightmap/v1/marker/index.html?marker=coord:'+points[0].lat+','+points[0].lng+';title:'+'导航'+';addr:'+actmessage.address" frameborder="0" style="width: 100%;height: 100vh;"></iframe>
	<iframe v-else :src="'https://api.map.baidu.com/marker?location='+JSON.parse(actmessage.lat)+','+JSON.parse(actmessage.lng)+'&title='+'导航'+'&content='+actmessage.address+'&output=html&src=webapp.baidu.openAPIdemo'" frameborder="0" style="width: 100%;height: 100vh;"></iframe>
</template>
<script setup>
	// 地址信息：里面有经纬度，具体地址
	let actmessage = JSON.parse(localStorage.getItem('actmessage'))
	let device = navigator.userAgent.toLowerCase()
	let iswexin = device.indexOf('micromessenger') != -1
	// 百度地图腾讯地图经纬度转换
	const bd_google_encrypt = (latlons) => {
		const x_pi = 3.14159265358979324 * 3000.0 / 180.0
		var point = [];
		for (const latlon of latlons) {
			var x = latlon.lng - 0.0065;
			var y = latlon.lat - 0.006;
			var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
			var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
			var gg_lon = z * Math.cos(theta);
			var gg_lat = z * Math.sin(theta);
			point.push({
				lat: gg_lat,
				lng: gg_lon
			})
		}
		return point;
	}
	const points = bd_google_encrypt([{lat:Number(JSON.parse(actmessage.lat)),lng:Number(JSON.parse(actmessage.lng))}])
</script>
<style></style>

方法二：

此方法需申请腾讯地图key值，否则会出现地图显示不出来，并报“Map key not configured”这个错。

申请网址：腾讯位置服务 - 立足生态，连接未来

步骤：① 先登录/注册,② 点击右上角【控制台】，③ 点击左侧【应用管理】下的【我的应用】，④ 创建应用，创建key值，⑤ 把key值粘进项目的下图中的位置

<template>
</template>
<script setup>
	// 地址信息：里面有经纬度，具体地址
	let actmessage = JSON.parse(localStorage.getItem('actmessage'))
	let device = navigator.userAgent.toLowerCase()
	let iswexin = device.indexOf('micromessenger') != -1
	// 百度地图腾讯地图经纬度转换
	const bd_google_encrypt = (latlons) => {
		const x_pi = 3.14159265358979324 * 3000.0 / 180.0
		var point = [];
		for (const latlon of latlons) {
			var x = latlon.lng - 0.0065;
			var y = latlon.lat - 0.006;
			var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
			var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
			var gg_lon = z * Math.cos(theta);
			var gg_lat = z * Math.sin(theta);
			point.push({
				lat: gg_lat,
				lng: gg_lon
			})
		}
		return point;
	}
	const initFn = ()=>{
		const points = bd_google_encrypt([{lat:Number(JSON.parse(actmessage.lat)),lng:Number(JSON.parse(actmessage.lng))}])
		// 微信浏览器-打开腾讯地图
		if(iswexin){
			wx.openLocation({
				latitude:points[0].lat,
				longitude:points[0].lng,
				address:actmessage.address,
				name:actmessage.address,
				scale: 16,
				infoUrl:'http://weixin.qq.com',
				fail:function(){
					window.location.href='https://api.map.baidu.com/marker?location='+JSON.parse(actmessage.lat)+','+JSON.parse(actmessage.lng)+'&title='+'导航'+'&content='+actmessage.address+'&output=html&src=webapp.baidu.openAPIdemo'
				},
				cancel:function(){
				}
			})
			return
		}else{
			//其他-打开百度地图
			window.location.href='https://api.map.baidu.com/marker?location='+JSON.parse(actmessage.lat)+','+JSON.parse(actmessage.lng)+'&title='+'导航'+'&content='+actmessage.address+'&output=html&src=webapp.baidu.openAPIdemo'
		}
	}
	initFn()
</script>
<style></style>