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

			},
相关推荐
尚学教辅学习资料1 小时前
基于SpringBoot+vue+uniapp的智慧旅游小程序+LW示例参考
vue.js·spring boot·uni-app·旅游
烂蜻蜓6 小时前
前端已死?什么是前端
开发语言·前端·javascript·vue.js·uni-app
Pro_er11 小时前
Vue3响应式编程三剑客:计算属性、方法与侦听器深度实战指南
vue·前端开发
家里有只小肥猫17 小时前
uniApp小程序保存canvas图片
前端·小程序·uni-app
小徐_233317 小时前
从空白到交互:用Trae快速搭建uni-app AI对话小程序页面
前端·uni-app·trae
貂蝉空大20 小时前
uni-app开发安卓和ios app 真机调试
android·ios·uni-app
程楠楠&M20 小时前
uni-app(位置1)
前端·javascript·uni-app·node.js
破z晓20 小时前
uniapp 整合openlayers 编辑图形文件并上传到服务器
前端·javascript·uni-app
鑫~阳1 天前
Vue2是如何利用Object.defineProperty实现数据的双向绑定?
前端·vue.js·vue
寰宇软件1 天前
PHP房屋出租出售高效预约系统小程序源码
前端·小程序·uni-app·vue·php