腾讯地图微信小程序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)
}
})
}

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