uniapp--腾讯地图步行路线规划

腾讯地图步行路线规划

<template>
	<view class="">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">步行路线规划</block>
		</cu-custom>
		<view class="notice">
			<u-notice-bar :text="text"></u-notice-bar>
		</view>
		<view class="map">
			<map :latitude="latitude" :longitude="longitude" show-location :markers="covers" :polyline="polyline"></map>
		</view>
		<view class="btn">
			<button type="primary" size="mini" @click="selectionLocation">手动选择目的地</button>
			<button type="warn" size="mini" @click="routePlanning">开始步行路线规划</button>
		</view>
	</view>
<
### 实现路径规划功能 在 UniApp 中利用 `map` 组件实现路径规划主要依赖于所集成的地图服务提供商的能力。对于腾讯地图而言,在使用前需确认已在项目中的 `manifest.json` 文件里配置好相应的权限设置并获取必要的密钥[^3]。 为了完成路径规划的功能,除了基本的地图显示外还需要调用特定的 API 接口来计算两点或多点之间的最优路径。下面给出一段简单的代码片段作为示例: ```html <template> <view class="container"> <!-- 地图组件 --> <map id="myMap" :polyline="polyline" :markers="markers" style="width:100%; height:80vh;"></map> <!-- 起始位置输入框 --> <input type="text" v-model="startLocation" placeholder="请输入起点"/> <!-- 结束位置输入框 --> <input type="text" v-model="endLocation" placeholder="请输入终点"/> <!-- 查询按钮 --> <button @click="getRoute">查询路线</button> </view> </template> <script> export default { data() { return { startLocation: '', endLocation: '', polyline: [], // 存储路径坐标数组 markers: [] // 标记起始点和结束点的位置 } }, methods: { getRoute() { const that = this; uni.request({ url: 'https://apis.map.qq.com/ws/direction/v1/driving/', method: 'GET', data: { from: `${this.startLocation}`, to: `${this.endLocation}`, key: '您的腾讯地图key' // 替换成自己的key }, success(res) { let result = res.data.result.routes[0]; if (result !== undefined){ that.polyline = [{ points: result.points, color:"#FF0000", width:6 }]; // 设置起点和终点标记 that.markers=[ {latitude:result.from.location.lat, longitude:result.from.location.lng,title:'起点'}, {latitude:result.to.location.lat, longitude:result.to.location.lng,title:'终点'} ]; }else{ console.log('未找到路径'); } } }); } } } </script> ``` 此段代码实现了通过用户输入两个地点名称后点击“查询路线”,向腾讯地图服务器发送请求获得这两地间的驾车导航数据,并将得到的结果绘制到页面上的地图上。注意这里仅展示了基于驾驶模式(`driving`) 的路径查找方式;实际上还有步行(`walking`) 和公交(`transit`) 等其他出行方案可供选择[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端志茗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值