微信小程序uniapp高德开放平台路线规划1对多导航路线方法记录

在高德开放平台申请key并下载sdk:amap-wx.js放到pages同级目录libs里面

<template>
	<view class="content">
		<view class="map_box">
			<map class="map" id="navi_map" :longitude="longitude" :latitude="latitude" scale="12" :markers="markers"
				:polyline="polyline"></map>
		</view>
	</view>
</template>

<script>
	let amapFile = require('@/libs/amap-wx.js');
	export default {
		data() {
			return {
				cSub:{
					subName:'地铁A',
					latitude: 39.949643,
				    longitude: 116.451028,
				},//选择的地铁,理解为起点
				cCommunity:[
				{
				latitude: 39.449643,
				longitude: 116.351028,
				community:'小区A'
				},{
				latitude: 39.649643,
				longitude: 116.651028,
				community:'小区B'
				}
				],//选择的小区,理解为多个终点
				markers: [],//标注数据存放
				polyline: [],
				latitude: 39.949643,//中心点纬度
				longitude: 116.451028,//中心点经度
				myAmapFun: null,
				markersData: null,
				textData :{}

			}
		},
		onLoad(options) {
			this.init();
		},
		methods: {
			async init() {
				this.myAmapFun = new amapFile.AMapWX({
					key: '你的高德key'
				});
				let that = this;
				that.polyline=[];
				this.markers.push({
					iconPath: "/static/img/start.png",//起点图标
					id: 0,//id要唯一
					longitude: this.cSub.longtitude,
					latitude: this.cSub.latitude,
					width: 31,
					height: 34,
					label:{
						content:this.cSub.subName,
						borderRadius:'10rpx',
						bgColor:'#fff',
						padding:'20rpx',
					},//标注的标签样式
				})
				this.cCommunity.forEach((item,index)=>{
					that.myAmapFun.getDrivingRoute({
						origin: this.cSub.longtitude+','+this.cSub.latitude,
						destination:item.longtitude+','+item.latitude,
						success(data) {
							let points = [];
							if (data.paths && data.paths[0] && data.paths[0].steps) {
								let steps = data.paths[0].steps;
								for (let i = 0; i < steps.length; i++) {
									let poLen = steps[i].polyline.split(';');
									for (let j = 0; j < poLen.length; j++) {
										points.push({
											longitude: parseFloat(poLen[j].split(',')[0]),
											latitude: parseFloat(poLen[j].split(',')[1])
										})
										
									}
								}
							}
							that.polyline.push({
								points: points,
								color: "#0091ff",
								width: 5
							});
							let distance;
							let cost;
							if (data.paths[0] && data.paths[0].distance) {
								cost=parseInt(data.paths[0].distance / 1000 + 3);
								distance = (data.paths[0].distance/1000).toFixed(2);
							}
							that.markers.push({
								iconPath: "/static/img/end.png",
								id:index+1,
								longitude: item.longtitude,
								latitude: item.latitude,
								width: 31,
								height: 34,
								label:{
									content:`到${item.community}\n距离:${distance}公里\n时间:约${cost}分钟`,
									borderRadius:'10rpx',
									bgColor:'#fff',
									padding:'20rpx',
								}
							})
						
							// if (data.taxi_cost) {
							// 	that.cost = '打车约' + parseInt(data.taxi_cost) + '元';
							// }
					
						},
						fail(err) {
							console.log("err"+err);
						}
					})
					
					
					
				})
				
			},
			showMarkerInfo(data, i) {
				this.textData = {
					name: data[i].name,
					desc: data[i].address
				}
			},
			changeMarkerColor(data, i) {
				for (let j = 0; j < data.length; j++) {
					if (j == i) {
						data[j].iconPath = "选中 marker 图标的相对路径"; //如：..­/..­/img/marker_checked.png
					} else {
						data[j].iconPath = "未选中 marker 图标的相对路径"; //如：..­/..­/img/marker.png
					}
					this.markers.push(data[j]);
				}
			},
			makertap(e) {
				let id = e.markerId;
				this.showMarkerInfo(this.markersData, id);
				this.changeMarkerColor(this.markersData, id);
			},

		}
	}
</script>

<style scoped lang="scss">
	.content {
		.map_box {
			.map {
				width: 750rpx;
				height: 100vh;
			}
		}
	
	}
</style>