高德地图货车路径规划JS API以及WEB API在VUE中使用方法

做一个路径规划系统，使用到了高德地图的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>