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

			},
相关推荐
LoveEate13 小时前
uniapp 运行/发版微信小程序
微信小程序·小程序·uni-app
fakaifa1 天前
【高级版】沃德政务招商系统源码+uniapp小程序
小程序·uni-app·源码下载·沃德政务招商系统·招商系统源码
weixin_446938871 天前
uniapp vue-i18n如何使用
前端·vue.js·uni-app
有来技术1 天前
UniApp 自定义导航栏适配指南:微信小程序胶囊遮挡、H5 与 App 全端通用方案
微信小程序·uni-app
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,WXS语法详解(10)
前端·javascript·学习·微信小程序·小程序·vue·团队开发
卷Java1 天前
违规通知功能修改说明
java·数据库·微信小程序·uni-app
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,WXSS样式处理语法基础(9)
前端·javascript·vscode·学习·微信小程序·小程序·vue
sniper_fandc2 天前
Vue3双向数据绑定v-model
前端·vue
卷Java2 天前
用户权限控制功能实现说明
java·服务器·开发语言·数据库·servlet·微信小程序·uni-app
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发