Uniapp在浏览器拉起导航

Uniapp在浏览器拉起导航

最近涉及到要在浏览器中拉起导航,对目标点进行路线规划等功能,踩了一些坑,找到了使用方法。(浏览器拉起)

效果展示

可以拉起三大平台及苹果导航

点击选中某个导航,会携带经纬度跳转到web端的导航界面,点击去导航会拉起本机的导航软件

高德地图
百度地图
苹果地图
腾讯地图

代码实现

项目使用的是VUE,uView,将这部分代码嵌入到页面中,根据使用逻辑进行相关的数据配置和调用就可以实现地图拉起导航了。

经度 longitude

纬度 latitude

导航目的地显示的名称 name

复制代码
//高德地图
			openGaodeMap(longitude, latitude, name) {
				window.location.href =`https://uri.amap.com/marker?position=${longitude},${latitude}&name=${name}&src=mypage&coordinate=gaode&callnative=1`;
			},
			//百度地图
			openBaiduMap(longitude, latitude, name) {
				window.location.href = "http://api.map.baidu.com/marker?location=" + latitude + "," + longitude +"&title=" + name + "&content=&output=html"
			},
			//腾讯地图
			openTengXunMap(longitude, latitude, name) {
				window.location.href = " http://apis.map.qq.com/uri/v1/marker?marker=coord:" + latitude + "," + longitude +";addr:" + name + ""
			},
			//Apple地图
			openAppleMap(longitude, latitude, name) {
				window.location.href =`http://maps.apple.com/?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82&ll=${latitude},${longitude}&spn=0.008766,0.019441`;

			},
相关推荐
凕雨2 小时前
Cesium学习笔记——dem/tif地形的分块与加载
前端·javascript·笔记·学习·arcgis·vue
Monly213 小时前
Uniapp:创建项目
uni-app
清晨細雨3 小时前
uniapp微信小程序:WIFI设备配网之TCP/UDP开发AP配网
前端·物联网·小程序·uni-app
寒寒_3 小时前
uni-app 安卓10以上上传原图解决方案
uni-app
敲代码的彭于晏4 小时前
2025 年必看!uni-app 结合 VSCode 实现高效跨平台开发入门
vue.js·uni-app
盛夏绽放5 小时前
uni-app 状态管理深度解析:Vuex 与全局方案实战指南
前端·javascript·uni-app
七七小报5 小时前
uniapp-商城-31-shop页面中的 我的订单
uni-app
小凯!在努力13 小时前
无线uniapp调试设备
uni-app
samuel91814 小时前
uniapp通过uni.addInterceptor实现路由拦截
前端·javascript·uni-app
凌云峰14 小时前
Uniapp调用native.js使用经典蓝牙串口通讯方法及问题解决
uni-app