做一个路径规划系统,使用到了高德地图的API以及VUE,而路径规划方面在高德地图中,货车的接口使用次数是极为有限的,研究了一段时间,所以使用的时候要谨慎一点次数。
本文记录一下高德地图的JS API和WEB API的货车路径规划的在VUE的使用方法。
JS API的货车路径规划
首先JS API在VUE项目中使用需要先在官网申请好key,再参考官网文档即可。具体可以参考我的另一篇关于高德地图在VUE中的使用方法。
链接: vue调用高德地图1.4.15版本.
当地图能够使用之后,就可以像其他AMap一样使用高德地图的AMap.TruckDriving。具体的option设置可以参考高德地图的文档:货车路线规划.
首先你得有一个装结果和装地图的容器
<div id="panel"></div>
<div id="amap-container">
然后给我们的panel容器加一个样式
#panel {
position: fixed;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 50px;
right: 10px;
width: 280px;
z-index: 9999;
}
#panel .amap-lib-driving {
border-radius: 4px;
overflow: hidden;
}
然后可以在methods写一个方法,然后再调用一下即可。
init() {
var map = new AMap.Map("amap-container", {
resizeEnable: true,
center: [116.397428, 39.90923], //地图中心点
zoom: 16, //地图显示的缩放级别
keyboardEnable: false,
});
AMap.plugin(["AMap.TruckDriving"], () => {
const truckdriving = new AMap.TruckDriving({
map: map,//地图
panel: "panel",//容器
policy: 10,//路线规则1-11(1:避免拥堵;2:不走高速;3:避免收费;4:避免拥堵&不走高速;5:避免收费&不走高速;6:避免拥堵&避免收费;7:避免拥堵&避免收费&不走高速;8:高速优先;9:避免拥堵&高速优先;10:时间最短;11:避免拥堵&速度优先&避免收费)
size: 1,//车型大小1-4(微型、小型、中型、大型)
width: 2.5,//宽度
height: 3,//高度
load: 0.9,//载重
weight: 5,//自重
axlesNum: 2,//轴数
province: "粤",//车牌省份
number: "111111",//车牌号
});
const path = [];
path.push({
lnglat: [116.303843, 39.983412], //位置必填
}); //起点
path.push({ lnglat: [116.321354, 39.896436] }); //途径
path.push({ lnglat: [116.407012, 39.992093] }); //终点
truckdriving.search(path, function (status, result) {
if (status === "complete") {
console.log("绘制配送路线完成");
} else {
console.log("获取配送路线数据失败:" + result);
}
});
WEB API的货车路径规划
首先我们可以参考一下官方的文档 WEB API货车路径规划.
其中我们选择服务平台的时候需要选择Web服务,与上面的JS API不同。
获得自己的key后,就可以按照高德地图Web服务文档给出的例子接口进行请求。请求的方法各位就可以各显神通了,我用的则是axios。
//文档给的接口
https://restapi.amap.com/v4/direction/truck?parameters
//具体例子如下,各种参数参考文档自行填写,key则是上面步骤申请获得的key,当avoidpolygons参数特别长时,需要使用POST方式请求
https://restapi.amap.com/v4/direction/truck?width=2.5&strategy=5&size=2&weight=10&axis=2&origin=116.481008%2C39.989625&destination=116.414217%2C40.061741&height=1.6&load=0.9&key=<用户的key>