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`;

			},
相关推荐
Little_Code1 小时前
uniapp 使用ffmpeg播放rtsp
ffmpeg·uni-app·rtsp
儿歌八万首2 小时前
uniapp 和原生插件交互
uni-app·交互
前端 贾公子11 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
源码_V_saaskw9 天前
宇鹿家政服务系统小程序ThinkPHP+UniApp
微信小程序·小程序·uni-app·微信公众平台
skyymrj10 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D10 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台
xw510 天前
支付宝小程序IDE版本迭代异常
uni-app·支付宝
!win !10 天前
支付宝小程序IDE版本迭代异常
uni-app·支付宝小程序
xw510 天前
抖音小程序支付错误码141211
uni-app·抖音小程序
伍哥的传说10 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画