Uniapp在浏览器拉起导航

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

效果展示

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

image-gtws.png

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

高德地图

image-pz6j.png

百度地图

image-on5m.png

苹果地图

image-iqwv.png

腾讯地图

image-xl5n.png

代码实现

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

经度 longitude

纬度 latitude

导航目的地显示的名称 name

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
           //高德地图
			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`;

			},