腾讯地图微信小程序javaScript SDK 批量距离计算（矩阵），一点到多点距离路线规划

先看一下效果图

可以直接扫小程序体验效果

说一下这个矩阵: 在起点开始，当前要去的地方有5个，利用腾讯地图的 批量距离计算，计算出距离，并且排序 然后渲染出相对应的路线。

话不多说，看一下代码：

<map :latitude="now_latitude" :longitude="now_longitude" :polyline="polyline_Object" :markders="markers" ></map> 

<script>
import QQmapSdk from '@/common/map/qqmap-wx-jssdk.min.js';
let qqmapsdk;  
    export default{
        data(){
            return{
                keyCode: 'OSUBZ-UF63X-4SY44-TFHQS-ICA23-aaaaaaa', //这是在腾讯地图上自己申请的key
                now_latitude: '',
                now_longitude:'',
                markers: []，
                polygon:[{
			points:[],
			strokeWidth:5,
			strokeColor:'#E82E2A',
			fillColor:'#ffffff',	
			}],
              endList: [{
			id: 1,
			latitude: 36.434796215066186,
			longitude: 115.99567977783205,
			name: ' 聊城大学山师东路'
		},
		{
			id: 2,
			latitude: 36.43876669801326,
			longitude: 115.99919883605959,
			name: "聊城大学明德公寓"
		},
		{
			id: 3,
			latitude: 36.439319,
			longitude: 115.980316,
			name: "山陕会馆"
		},
		{
			id: 4,
			latitude: 36.442046508974364,
			longitude: 115.98606674072268,
			name: "东昌湖风景区龙山花园小区(文化路)"
		}
            ],
                  
            }
        }
        onLoad(){
            //实例化地图
            qqmapsdk = new QQmapSdk({
		key: this.keyCode
            });
            this.getNowLocation();
        }
    }


</script>

定义好了变量，我们开始写方法 思路： 1.先定位获取到当前位置 2.这里我自己写死了几个位置数据，是我们需要前往的几个地点，在实际的开发中，这是需要我们自己获取的地理位置，我这里没有后端，就在前端我自己写的假数据endList。 3.调用腾讯地图sdk 批量距离API ## calculateDistance(options:Object) [文档可以直接查看] 4.拿到结果后，我们合并数组，并且根据距离这个参数进行排序，从距离最近到最远。

以下代码：

//获取当前地理位置
getNowLocation() {
    let _this = this;
    wx.getLocation({
    type: 'wgs84',
    success: function(res) {
	console.log(res)
	_this.now_latitude = res.latitude
	_this.now_longitude = res.longitude				
        //把我的当前位置显示在地图上
	let obj = {
		id: 0,
		width: 30,
		height: 30,
		iconPath: '../../static/qidian.png',
		longitude: res.longitude,
		latitude: res.latitude
	}
	_this.markers.push(obj)
		}
	})
},

			// 进行路线规划，一对多 || 多对一（前置点最多只能设置5个）getRoadPath() {
let endPoint = []
let endPoyline = []
let that = this;
// 先在地图上显示出所处区域门店的位置
that.endList.forEach((item, index) => {
	//最终门店位置点做处理
	let locationPoint = item.latitude + ',' + item.longitude;
	endPoint.push(locationPoint)

})
				//把终点门店位置数组处理成字符串形式
endPoint = endPoint.join(';');
qqmapsdk.calculateDistance({
	mode: 'straight',
	from: that.now_latitude + ',' + that.now_longitude,
	to: endPoint,
	success: function(res) {
		if (res.status == 0) {
			let list = res.result.elements;
			console.log(that.endList)
                            list.map((item, index) => {                                                       that.endList[index].distance = item.distance;
                            this.endList[index]['duration']=item.duration;
			})
			that.endList.sort((a, b) => {
				return a.distance - b.distance
			})
			console.log(that.endList)
			//把起点作为第一个数据 插入到数组的最前面
			let startLocation={                                                                      latitude:that.now_latitude,
                               longitude:that.now_longitude,
                               distance:0,
                               id:6
			}
                        that.endList.unshift(startLocation)                                              that.endList.forEach((item,index)=>{
                        let iconPath=''
                        if(index==0){                                                                       iconPath='../../static/qidian.png'
				} else if(index==1){
                                iconPath='../../static/1.png'
                                } else if(index==2){								iconPath='../../static/2.png'
				} else if(index==3){
				iconPath='../../static/3.png'
				} else if(index==4){
				iconPath='../../static/4.png'
				} else if(index==5){
                                iconPath='../../static/5.png'
			}
			let obj = {
				id: item.id,
				width: 30,
				height: 30,
				iconPath: iconPath,                                                               longitude: item.longitude,
				latitude: item.latitude
			};                                                                   that.markers.push(obj);
		})
	// 循环路径出来
              for(let i=0 ; i<that.endList.length; i++){					if(i+1>=that.endList.length){
		return 
		}
        let fromLocation=that.endList[i].latitude+','+that.endList[i].longitude;
	let toLocation=that.endList[i+1].latitude+','+that.endList[i+1].longitude;	that.drawRoadPath(fromLocation,toLocation)
		}
	}
}
})
				
},


drawRoadPath(from, to) {
let that = this;
qqmapsdk.direction({
	mode: 'driving',
	from: from,
	to: to,
	success:function(res){
		var ret = res;
		var coors = ret.result.routes[0].polyline
		var pl = [];
		//坐标解压（返回的点串坐标，通过前向差分进行压缩）
		var kr = 1000000;
		for (var i = 2; i < coors.length; i++) {
			coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
		}
					//将解压后的坐标放入点串数组pl中
		for (var i = 0; i < coors.length; i += 2) {
			pl.push({
				latitude: coors[i],
				longitude: coors[i + 1]
			})
		}
		let obj={
			points: pl,
			color: "#3FB837",
			width: 5,
			dottedLine: false,
			arrowLine:true					,
			}
		that.polyline_Object.push(obj)
	}
})
}

以上就是我自己关于一点到多点的理解，其实并没有完全做出 腾讯给的那种例子的效果。如果大家有建议和不足的，可以在下面评论。