我遇到的状况：
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> //htmlvar 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;}正文中有残缺的解释，须要急躁去看，也能够依据本身的状况去批改。我这里没有进行封装，然而能够失常的应用，如果你须要多组件调用，，须要本人去封装搞下，我就不在这把我需要封装的拿进去了，毕竟需要不同
总结：
心愿多提意见，有更好的倡议，能够留言，虚心学习！
低微的小刘！