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

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

3、VBA网抓高德地图货车路径规划距离（借助刘永富老师插件解析JSON格式数据）
Sub 高德货车()Dim x As MSXML2.XMLHTTP60Set x = New MSXML2.ServerXMLHTTP60With x.Open "GET", &q ...
高德地图驾车路径规划API，获取两地点之间的驾车里程和时间
高德地图驾车路径规划API,获取两地点之间的驾车里程和时间 import pandas as pd import requests import jsondef get_dis_tm(origin, ...
vue[高德地图行车路径规划以及路线记录绘制操作]
最近的一个项目中需要根据需求将地图上画出一条高速公路,然后将这条高速公路的行车轨迹绘制成一条带有颜色路线以便后续插入内容. 看遍了不少高德地图的api内容以及搜索了不少的网上资源,发现可以通过路径规划 ...
Android 高德地图自定义线路规划选择方案之后按照方案进行导航
Android 高德地图自定义线路规划选择方案之后按照方案进行导航因为我这边导航需求的问题,导致我这边不能使用高德地图官方的线路规划和导航.所以我这边线路规划和导航界面都是根据高德地图那边给的api ...
百度地图no result available_【整理之路二】百度地图的路径规划和调用本机地图导航...
推荐看完之后注意一下最后的东西一.细说百度地图的路径规划路径规划主要有这么几种 1.公交路径规划 1.1 市内公交规划(暂时不在这里说) 1.2 跨市/省公交规划 // 导入头文件 #import ...
【整理之路二】百度地图的路径规划和调用本机地图导航
一.细说百度地图的路径规划路径规划主要有这么几种 1.公交路径规划 1.1 市内公交规划(暂时不在这里说) 1.2 跨市/省公交规划 // 导入头文件#import <BaiduMapAPI_ ...
Android 百度地图之路径规划
我集成了百度地图驾车路径规划,但总是不规划,下面我来简单说说吧. 首先就是按照百度官方文档按步骤复制粘贴对应的代码到自己工程. 百度地图驾车路径规划网址:https://lbsyun.baidu.co ...
基于栅格地图的路径规划（一）基于Matlab二维、三维栅格地图的构建
基于栅格地图的路径规划(一)基于Matlab二维.三维栅格地图的构建前言 1.二维栅格地图的创建 1.1.二维栅格地图构建原理 1.2.二维栅格地图构建例程 2.三维栅格地图的创建 2.1.三维栅格 ...
.NET Core开发实战（第25课：路由与终结点：如何规划好你的Web API）--学习笔记（下）...
25 | 路由与终结点:如何规划好你的Web API 自定义约束实现了路由约束接口,它只有一个 Match 方法,这个方法传入了 Http 当前的 httpContext,route,routeKey ...

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

JS API的货车路径规划

WEB API的货车路径规划

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

最新文章

热门文章