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

			},
相关推荐
吴传逞15 小时前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
最好结果1 天前
ruoyi系统-vue-elementui 表格单元格点击复制功能实现:实践与问题解决
vue
2501_915921431 天前
小团队如何高效完成 uni-app iOS 上架,从分工到工具组合的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_916008891 天前
uni-app iOS 文件管理与 itools 配合实战,多工具协作的完整流程
android·ios·小程序·https·uni-app·iphone·webview
!win !1 天前
uni-app项目Tabbar实现切换icon动效
小程序·uni-app
xw51 天前
uni-app项目Tabbar实现切换icon动效
前端·uni-app
2501_916007471 天前
uni-app iOS 文件调试常见问题与解决方案:结合 itools、克魔、iMazing 的实战经验
android·ios·小程序·https·uni-app·iphone·webview
豆豆(设计前端)1 天前
使用 Uni-app 打包 外链地址APK 及 iOS 注意事项
ios·uni-app
jingling5551 天前
uniapp | 解决组件样式不生效问题
前端·css·uni-app·html·学习方法
^Rocky1 天前
微信小程序(uniapp)实现连接蓝牙
微信小程序·uni-app·蓝牙连接