共计 3594 个字符，预计需要花费 9 分钟才能阅读完成。
我遇到的状况：
1、应用腾讯地图画出门路，并在地图上示意方向（也就是箭头指向）
我查了很多的材料，并没有具体的论断，我依照 api 给的办法，我自定义做出的成果
vue+element+ 腾讯地图 API，（仅供参考）
效果图如下：
思路
1、首先看是否跟我应用的办法申明 Map 统一的办法，腾讯地图的 JavaScript API GL 的 api（如有不同，能够看逻辑，逻辑是一样的，然而须要本人去专研下代码）
https://lbs.qq.com/webApi/jav…
2、如果看到这里，那我先讲下逻辑，我之前思考过计划：
（1）地图自带的线段带的箭头指向（跟理论需要不符），而且，箭头不能大于具体宽度，这样咱们没方法扩大，果然放弃了（心愿腾讯地图 api，这里能够改善下）
这时示例地址：
https://lbs.qq.com/webDemoCen…
这是 api 地址：
https://lbs.qq.com/webApi/jav…
（2）自定义 DOM 覆盖物（DOMOverlay）这是百度搜寻最多的计划，然而我看过，能够做到，申明 img 构造（img 就是箭头的图片），依照 img 旋转不同的角度所失去的，然而会呈现一种 bug，就是不会随着地图缩放而进行变动，这就很恼火了，所以我就没思考（测试必定给我提 bug）
（3）这种目前我应用的一种，依据两点的坐标，判断角度、拿到箭头的三角坐标给画两条线，联合成箭头形态，（说白点：就是跟画线一样，画进去的箭头）
（4）依据画多边形，进行绘制，然而原理都是一样的，先找到箭头的三角坐标，之后进行解决，须要看具体的需要，（如果是箭头是笼罩有色彩的，那就先拿到坐标，进行多边形绘制，成果也能实现）。重点：拿到箭头的三个角的坐标！！！
（5）其余的计划，大同小异，都是依据需要，联合坐标，进行绘制。
上面我就具体讲下第三种
1、申明 map 以及 polylineLayer（后面是地图，前面是画线），点位的申明，我就不做粘贴的，会一点都应该会撒点
<div class="echarts_heating" id="map"></div> //html
var map = new TMap.Map(document.getElementById("map"), {
zoom: 11, // 设置地图缩放级别
center: center, // 设置地图中心点坐标
mapStyleId: "style1", // 个性化款式默认 style
disableDefaultUI: true,
showControl: false,
baseMap: {
type: "vector",
features: ["base", "building3d", "point"], // 暗藏矢量文字可依据需要去配置
},
// mapStyleId: "style1", // 设置款式 ID，本例中的 key 绑定的 style1 为经典地图款式
//（若应用未绑定的款式或有效 ID，则会提醒谬误，并用地图默认款式显示）});画线 polylineLayer 的申明以及线段的格调
var polylineLayer = new TMap.MultiPolyline({
map, // 绘制到指标地图
// 折线款式定义
styles: {
style_blue: new TMap.PolylineStyle({
color: "#F15E59", // 线填充色
width: 3, // 折线宽度
lineCap: "round", // 线端头形式
}),
style_dash: new TMap.PolylineStyle({
color: "#F15E59", // 线填充色
width: 3, // 折线宽度
lineCap: "butt", // 线端头形式
dashArray: [6, 5], // 虚线展现形式
}),
},
geometries: [],});在 vue 的 methods 中
//arr 是点位坐标，[终点, 起点] index，indexli，是为了不同的 id 所循环进去的，不便不同的命名，可勾销
computeHeading(arr, index, indexli) {
// 依据 computeDistance 去查问两点之前的间隔
let computeDistance = TMap.geometry.computeDistance(arr);
// 查问两点之前的间隔，如果间隔过短，不进行任何解决
if (computeDistance > 1500) {let computeHeading = TMap.geometry.computeHeading(arr[0], arr[1]);
// 依据 computeHeading，获取以后点位的的角度
let du; // 这个变量只是为了不让箭头的顶端和 icon 重叠而申明的反向的角度
if (computeHeading > 0) {
du = computeHeading - 180;
// 因为地图的坐标系中只有【180，-180】所以进行逆时针转换
} else {du = computeHeading + 180;}
// path0 就是依据 computeDestination，反向拿到的新的箭头顶点的坐标
// 其中 200，是 icon 与顶点的间隔，可调整
let path0 = TMap.geometry.computeDestination(arr[1], du, 200);
// top1，top2，是画箭头的角度获取，// 因为地图的坐标系中只有【180，-180】所以进行逆时针转换
// 我这边获得是偏移 40 度，140，220，可调整
let top1 = this.computeRotaion(computeHeading + 140);
let top2 = this.computeRotaion(computeHeading + 220);
// path1，path2 是依据箭头的坐标，预计画的线段长度、以及角度，去获取箭头两边的点位坐标
let path1 = TMap.geometry.computeDestination(path0, top1, 1200);
let path2 = TMap.geometry.computeDestination(path0, top2, 1200);
// console.log("path1", path1);
// 依据取得到箭头的三点右边，进行绘制，这边也能够绘制覆盖性多边形 index，indexli，可批改，可勾销，只有是不同的 id 即可
this.polylineLayer.add({
styleId: "style_blue",
id: "pl1_" + index + "_" + indexli,
paths: [path0, path1],
});
this.polylineLayer.add({
styleId: "style_blue",
id: "pl2_" + index + "_" + indexli,
paths: [path0, path2],
});
// 依据不同长度，做不同的计划，依据长度在 10000 米以上的，我这边做两头的箭头，原理同上 //
if (computeDistance > 10000) {
// 先拿到两头的点位坐标
let pathzhong = TMap.geometry.computeDestination(arr[1],
du,
computeDistance / 2
);
// path3，path4，是两头箭头两边点位坐标，let path3 = TMap.geometry.computeDestination(pathzhong, top1, 1200);
let path4 = TMap.geometry.computeDestination(pathzhong, top2, 1200);
// 在依据三点坐标，进行画线，作出箭头 index，indexli，可批改，可勾销，只有是不同的 id 即可
this.polylineLayer.add({
styleId: "style_blue",
id: "pl3_" + index + "_" + indexli,
paths: [pathzhong, path3],
});
this.polylineLayer.add({
styleId: "style_blue",
id: "pl4_" + index + "_" + indexli,
paths: [pathzhong, path4],
});
}
}
},
// 因为地图坐标的范畴【180，-180】所以进行转化
computeRotaion(heading) {
let rotation;
if (heading > 180) {rotation = heading - 360;} else {rotation = heading;}
return rotation;
}正文中有残缺的解释，须要急躁去看，也能够依据本身的状况去批改。我这里没有进行封装，然而能够失常的应用，如果你须要多组件调用，，须要本人去封装搞下，我就不在这把我需要封装的拿进去了，毕竟需要不同
总结：
心愿多提意见，有更好的倡议，能够留言，虚心学习！
低微的小刘！
