封装一个去导航的公共函数，打开第三方地图去导航，兼容h5和小程序，技术栈uniapp+vue3+setup

张

张建站

2026/5/8 18:25:51

10分钟阅读

封装一个去导航的公共函数，打开第三方地图去导航，兼容h5和小程序，技术栈uniapp+vue3+setup

我主要是自己在中项目中需要用到所以就封装了简单记录一下。那就废话少说直接上代码了export function openLocation(latitude, longitude, name, address) { try { // 参数校验 if (!latitude || !longitude || !name) { uni.showToast({ title: 导航参数不完整, icon: none }); return; } // 环境判断 const platform uni.getSystemInfoSync().platform; const isH5 process.env.UNI_PLATFORM h5; const isMiniProgram process.env.UNI_PLATFORM mp-weixin || process.env.UNI_PLATFORM mp-alipay || process.env.UNI_PLATFORM mp-baidu; const isWechatBrowser isH5 navigator.userAgent.toLowerCase().includes(micromessenger); // 小程序端 if (isMiniProgram) { handleMiniProgramMap(latitude, longitude, name, address); } // H5端区分微信内置浏览器和普通浏览器 else if (isH5) { if (isWechatBrowser) { handleWechatH5Map(latitude, longitude, name, address); } else { handleNormalH5Map(latitude, longitude, name, address); } } // App端 else { handleAppMap(latitude, longitude, name, address); } } catch (error) { console.error(地图导航打开失败:, error); uni.showToast({ title: 暂不支持该地图导航, icon: none }); } }; /** * 小程序端处理 */ const handleMiniProgramMap async (latitude, longitude, name, address) { try { // 微信小程序优先用内置地图 if (process.env.UNI_PLATFORM mp-weixin) { await uni.openLocation({ latitude, longitude, name, address }); return; } // 其他小程序尝试唤起第三方地图Scheme const mapSchemes [{ name: 腾讯地图, scheme: qqmap://map/routeplan?typedriveto${name}tocoord${latitude},${longitude} }, { name: 高德地图, scheme: amap://route?sourceApplicationappnamedlat${latitude}dlon${longitude}dname${name}dev0t0 }, { name: 百度地图, scheme: bdapp://map/direction?destinationname:${name}|latlng:${latitude},${longitude}modedrivingsrcandr.baidu.openAPIdemo } ]; for (const map of mapSchemes) { try { await uni.navigateTo({ url: map.scheme }); return; } catch (err) { continue; } } throw new Error(没有可用的地图应用); } catch (error) { throw error; } }; /** * 微信内置浏览器H5处理核心适配逻辑 */ const handleWechatH5Map async (latitude, longitude, name, address) { try { // 1. 先打开腾讯地图H5导航页只展示路线不唤起App const tencentWebUrl https://apis.map.qq.com/uri/v1/routeplan?typedriveto${encodeURIComponent(name)}tocoord${latitude},${longitude}referer电影票务; window.open(tencentWebUrl, _blank); // 2. 弹窗提示一键复制功能 await uni.showModal({ title: 导航提示, content: 已为您打开腾讯地图路线页可在当前页面查看路线或点击下方按钮复制地址粘贴到腾讯地图/高德/百度App导航目的地${name} 坐标${latitude},${longitude}, confirmText: 复制地址, cancelText: 我知道了, success: async (res) { if (res.confirm) { // 一键复制地址坐标到剪贴板 const copyText 目的地${address} try { // uni-app 复制API await uni.setClipboardData({ data: copyText }); uni.showToast({ title: 地址已复制, icon: success }); } catch (err) { // H5环境兜底复制 if (navigator.clipboard) { await navigator.clipboard.writeText(copyText); uni.showToast({ title: 地址已复制, icon: success }); } else { uni.showToast({ title: 复制失败请手动复制, icon: none }); } } } } }); } catch (error) { throw error; } }; /** * 普通浏览器H5处理非微信环境 */ const handleNormalH5Map async (latitude, longitude, name, address) { try { const mapUrls [ // 腾讯地图最新H5链接 { name: 腾讯地图, url: https://apis.map.qq.com/uri/v1/routeplan?typedriveto${encodeURIComponent(name)}tocoord${latitude},${longitude}referer电影票务 }, // 高德地图 { name: 高德地图, url: https://amap.com/navigation?lat${latitude}lng${longitude}name${encodeURIComponent(name)}typedrive }, // 百度地图 { name: 百度地图, url: https://api.map.baidu.com/direction?destination${latitude},${longitude}origin我的位置modedrivingoutputhtml } ]; // 优先打开腾讯地图 try { window.open(mapUrls[0].url, _blank); return; } catch (err) { console.log(腾讯地图打开失败, err); } // 失败则显示选择菜单 const mapOptions mapUrls.map(item ({ text: 打开${item.name}, value: item.url })); uni.showActionSheet({ itemList: mapOptions.map(item item.text), success: (res) { window.open(mapOptions[res.tapIndex].value, _blank); } }); } catch (error) { throw error; } }; /** * App端处理 */ const handleAppMap async (latitude, longitude, name, address) { if (window.plus) { const mapSchemes [ qqmap://map/routeplan?typedriveto${name}tocoord${latitude},${longitude}, amap://route?sourceApplicationappnamedlat${latitude}dlon${longitude}dname${name}dev0t0, bdapp://map/direction?destinationname:${name}|latlng:${latitude},${longitude}modedrivingsrcappname ]; for (const scheme of mapSchemes) { try { await window.plus.runtime.openURL(scheme); return; } catch (err) { continue; } } } // 兜底用内置地图 await uni.openLocation({ latitude, longitude, name, address }); };你只需引入这个函数传入四个参数即可经纬度门店名称门店地址import { openLocation } from ./components/locationMap.js //去导航 const handleNav () { const { storeName, address, lat, lng } orderDetail.info openLocation(lat, lng, storeName, address); }实现效果如下