|
🚀 本篇主要讲解在H5中如何唤起高德、百度、腾讯地图导航
一、微信浏览器环境中
在微信中H5是不支持唤起第三方地图的，若要实现导航 可采用weixin-js-sdk 进行导航 前提：需要有公众号并进行关联，公众号后台系统中需要添加前端访问域名，所以线上环境才可使用
// 1、先安装weixin Jsdk
cnpm i weixin-js-sdk --save
// 2、初始化配置参数
// res数据来源于后端
wx.config({
beta: true,
debug: res.debug,
appId: res.appId,
timestamp: res.timestamp,
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: res.jsApiList
});
// 3、加载及使用
wx.ready(function () {
wx.openLocation({
type: "gcj02",
latitude: "纬度",
longitude: "经度",
name: "地址标题",
scale: 18,
address: "详细地址"
});
})
二、其它浏览器中
百度地图跳转地址 官方参数文档
baidumap://map/walknavi?destination=${lat},${lng}&title=${name}&content=${addressStr}&output=html&coord_type=gcj02&src=test
腾讯地图跳转地址
qqmap://map/marker?marker=coord:${lat},${lng};title:${name};addr:${addressStr}&referer=腾讯地图Key
高德地图跳转地址 官方参数文档
ios: 'iosamap://navi?sourceApplication=mingyue&poiname=${name}&lat=${lat}&lon=${lng}&dev=0&t=2'
android: 'androidamap://viewMap?sourceApplication=mingyue&poiname=${name}&lat=${lat}&lon=${lng}&dev=0&t=2'
三、组件封装，一键使用
新建NavigateMap.vue
导航
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { navigationWx, isWx, navToMap } from '@/utils/index';
const isShowSheet = ref(false)
const sheetList = [
{
name: '百度地图',
id: 1,
},
{
name: '高德地图',
id: 2,
},
{
name: '腾讯地图',
id: 3,
}
]
const navigateLine = () => {
isWx().then((res) => {
if (res !== 'no-wx') {
navigationWx(getLocation())
} else {
isShowSheet.value = true
}
})
}
// 选择导航
const handleSheetSelect = (action: { id: Number }) => {
navToMap(getLocation(), action.id)
}
// 获取位置信息
const getLocation = () => {
return {
lat: '纬度',
lng: '经度',
name: '目的地名称',
address: '目的地详细地址'
}
}
defineExpose({
navigateLine
})
button {
width: 100%;
height: 84px;
border-radius: 50px;
color: #333333;
font-size: 34px;
background: linear-gradient(90deg, #4DBFF8 0%, #3586C9 100%);
color: #fff;
border: 0;
}
新建全局settings/index.ts
export const systemSetting = {
// 腾讯地图Key
txKey: 'xxxxxxxx',
// 跳转App公共地址
mapUrlConfig: {
baidu: 'baidumap://map/walknavi',
gaode: {
ios: 'iosamap://navi',
android: 'androidamap://viewMap'
},
tengxun: 'qqmap://map/marker'
}
}
新建utils/index.ts
import wx from 'weixin-js-sdk'
import { systemSetting } from '@/settings/index'
import { showToast } from 'vant';
/**
* 跳转第三方地图 微信
* @param addressInfo 地址信息
*/
export const navigationWx = (addressInfo: any) => {
const { lat, lng, name, address } = addressInfo
wx.ready(function () {
wx.openLocation({
type: "gcj02",
latitude: Number(lat),
longitude: Number(lng),
name: name,
scale: 18,
address: address || ''
});
})
}
/**
* 打开高德或百度地图
* @param {*} latitude
* @param {*} longitude
* @param {*} name 导航目的地名称
* @param {*} type 1 百度地图 2 高德地图
*/
export const navToMap = (addressInfo: any, type: Number) => {
const { lat, lng, name, address } = addressInfo
const addressStr = address || ''
let url
const u = navigator.userAgent
//判断ios
const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
//判断Android
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
if (!isIOS && !isAndroid) {
return showToast("此设备暂不支持")
}
if (type === 1) {
// 百度
url = `${systemSetting.mapUrlConfig.baidu}?destination=${lat},${lng}&title=${name}&content=${addressStr}&output=html&coord_type=gcj02&src=test`
} else if (type === 3) {
url = `${systemSetting.mapUrlConfig.tengxun}?marker=coord:${lat},${lng};title:${name};addr:${addressStr}&referer=${systemSetting.txKey}`
} else {
// 高德
let params = `?sourceApplication=mingyue&poiname=${name}&lat=${lat}&lon=${lng}&dev=0&t=2`
const { android, ios } = systemSetting.mapUrlConfig.gaode
url = (isAndroid ? android : ios) + params
}
if (url) {
window.location.href = url
}
}
// 判断微信环境
export const isWx = () => {
var ua = navigator.userAgent.toLowerCase();
if (/micromessenger/.test(ua)) {
return new Promise(resolve => {
wx.miniProgram.getEnv(function (res) {
if (res.miniprogram) {
// 小程序种
resolve("mini-wx");
} else {
// 微信环境种
resolve("wx");
}
});
});
} else {
// 不在微信种
return new Promise(resolve => {
resolve("no-wx");
});
}
}
🚀🚀🚀🚀 大功告成 🚀🚀🚀🚀
|