uniapp h5地图导航

uniapp h5地图导航

view部分

 <label @click="daohang">导航</label>

js部分

 export default {
   data(){
     return {
	}
	   },
    onLoad(){
     },
    methods: {
		
		//方法一
		 //daohang(){
		 //	let latitude = '';
		 //	let longitude = '';
		 //	let position={latitude, longitude};
		 //	let address='湖南长沙市政府';
		 //	window.location.href = `http://apis.map.qq.com/uri/v1/routeplan?type=drive&to=${address}&tocoord=${position}&referer=dfdfd`	
		// },
		
		方法二
		daohang(){
			window.location.href =  'http://apis.map.qq.com/uri/v1/marker?marker=coord:27.841152,112.941226' 
		}
		
		
     }
 }

方法一 :通过名称查找地址名称导航
方法二 :通过经纬直接导航

### 集成高德地图API实现导航功能 #### 获取高德地图Key 为了在UniApp H5页面中集成高德地图并实现导航功能,首先需要前往高德开放平台申请应用的key。特别注意,在创建应用时需针对Web端(JS API)申请key,因为其他类型的key可能会导致key值不匹配错误[^1]。 #### 创建HTML结构 定义好页面的基础布局,确保有用于展示地图的容器: ```html <div id="container"></div> ``` #### 初始化地图实例 利用`<script>`标签引入高德地图JavaScript API,并初始化地图对象。由于部分uni-app内置方法可能无法正常工作于此场景下,因此推荐采用传统方式编写脚本逻辑并将所需参数传递给渲染层(renderjs)[^2]。 ```javascript // 引入高德地图API <script src="//webapi.amap.com/maps?v=1.4.15&key=您的密钥"></script> // 地图初始化函数 function initMap() { var map = new AMap.Map('container', { zoom: 10, // 设置缩放级别 center: [经度, 纬度], // 中心点坐标 }); } ``` #### 添加导航控件 为了让用户能够方便地发起路线规划请求,可以在界面上添加按钮或其他交互元素来触发导航操作。当点击这些元素时,调用AMapDriving或类似的接口完成路径计算与显示。 ```javascript document.getElementById('navigateButton').addEventListener('click', function () { var drivingOption = { policy: AMap.DrivingPolicy.LEAST_TIME, origin: '起点经纬度', destination: '终点经纬度' }; var driving = new AMap.Driving(drivingOption); driving.search(function (status, result) { if (status === 'complete') { console.log('成功绘制驾车线路'); } else { console.error('失败:', result.info); } }); }); ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值