uniapp H5 调用高德地图导航

uniapp H5 调用高德地图导航

链接: 高德地图路线规划,点击前往

  • 如果你需要获取自己的经纬度位置的话可以用如下(不是所有浏览器都兼容)
var geolocation = new AMap.Geolocation();
	geolocation.getCurrentPosition(function(status, result) {
		console.log(result.position,'result');
	})
  • 开始是使用window.location.href来打开唤醒链接,后来发现有些浏览器不兼容,不能用
  • 这里的form和to是起点参数是 经度,纬度,名字
window.location.href=`//uri.amap.com/navigation?from=118.115948,24.470662,我的位置&to=118.092515,24.436698终点&mode=car&policy=1&src=com.mzwu.www&callnative=1`
  • 后面换了一种打开的方式
window.open(`//uri.amap.com/navigation?from=118.115948,24.470662,我的位置&to=118.092515,24.436698终点&mode=car&policy=1&src=com.mzwu.www&callnative=1`)

就可以打开了,如果没安装高德点击立即导航的时候会让你下载高德地

上图

在这里插入图片描述
在这里插入图片描述

### 如何在 UniApp H5 页面调用高德地图 APP 实现导航功能 #### 配置项目中的 `manifest.json` 文件 为了使应用程序能够识别并使用高德地图服务,需先配置项目的 `manifest.json` 文件。具体来说,在文件内的 `"h5"` 字段下添加如下设置: ```json "h5": { "sdkConfigs": { "maps": { "amap": { "key": "你的高德开发者Key", "securityJsCode": "安全校验码(如果需要)", "serviceHost": "" } } } } ``` 此部分设定允许H5环境下的应用访问高德地图的相关接口和服务[^2]。 #### 编写 JavaScript 方法来启动高德地图 App 导航 要实现在网页上点击按钮后跳转至高德地图App执行路径规划的功能,则可以编写一段JavaScript函数用于处理该逻辑。这里给出一个简单的例子说明如何构建这样的方法: ```javascript function openAmapNavigation(destination) { const schemeUrl = 'androidamap://navi?sourceApplication=yourAppName&poiname=&lat=' + destination.latitude + '&lon=' + destination.longitude; try { window.location.href = schemeUrl; setTimeout(() => { if (confirm('未能成功打开高德地图, 是否前往下载?')) { window.location.href = 'https://uri.amap.com/mobile'; } }, 1000); } catch(e){ alert('无法启动高德地图'); } } ``` 上述代码片段定义了一个名为 `openAmapNavigation()` 的函数接收目的地坐标作为参数,并尝试通过URL Scheme的方式唤起安装于设备上的高德地图客户端完成导航操作。当检测到失败时会询问用户是否愿意去下载官方软件[^1]。 #### HTML 中创建触发元素 最后一步是在HTML文档里加入可交互的UI控件以便用户触发这个动作。比如放置一个按钮链接到之前编写的JS方法: ```html <button onclick="openAmapNavigation({latitude: 39.908744, longitude: 116.39752}>点击开启导航</button> ``` 这样就完成了整个流程的设计与实现过程。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值