腾讯地图api，根据路线绘制自定义箭头
我遇到的情况：1.使用腾讯地图绘制路线，并在地图上标明方向（即箭头指向）。查了很多资料，都没有详细的结论，我按照api给的方法，自定义了效果vue+element+腾讯地图API，（仅供参考）效果图如下：思路1.首先检查我声明Map的方法是否一致。腾讯地图的JavaScriptAPIGLAPI（有什么不同的可以看逻辑，逻辑是一样的，但是需要自己研究代码）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）这种我目前正在使用的一种，首先根据两点的坐标，判断角度，得到箭头的三角坐标画两条线，组合成一个箭头形状，（说点：和画a一样线，画出的箭头）（4）根据画多边形，Draw，不过原理是一样的，先求出箭头的三角坐标，再进行处理，看具体需求nts，（如果箭头上覆盖了颜色，那么先获取坐标，绘制多边形，也是可以实现的效果）。重点：获取箭头三个角的坐标！！！(5)其他方案类似，都是根据需要绘制，结合坐标。接下来具体说说第三种1.声明map和polylineLayer（前面是地图，后面是线），点的声明，我就不贴了。如果你知道一点，你应该撒一些
//htmlvarmap=newTMap.Map(document.getElementById("map"),{zoom:11,//设置地图缩放级别center:center,//设置地图中心点坐标mapStyleId:"style1",//个性化样式默认样式disableDefaultUI:true,showControl:false,baseMap:{type:"vector",features:["base","building3d","point"],//隐藏的矢量文字可以根据需要配置},//mapStyleId:"style1",//设置样式ID，style1绑定到这个keyexample是经典的地图样式//（如果使用未绑定的样式或无效的ID，将提示错误并以地图的默认样式显示）});画线的polylineLayer声明和线段样式varpolylineLayer=newTMap.MultiPolyline({map,//绘制到目标地图//折线样式定义styles:{style_blue:newTMap.PolylineStyle({color:"#F15E59",//线条填充颜色width:3,//折线宽度lineCap:"round",//线条结束样式}),style_dash:newTMap.PolylineStyle({color:"#F15E59",//线条填充颜色width:3,//折线宽度lineCap:"butt",//线条结束样式dashArray:[6,5],//虚线显示方式}),},几何:[],});vue的方法中//arr是点坐标，[起点，终点]index，indexli，是针对不同的id循环出来的，方便不同的命名，可以取消computeHeading(arr,index,indexli){//根据computeDistance查询两点之前的距离letcomputeDistance=TMap.geometry.computeDistance(arr);//查询两点之前的距离，如果距离太短，不做任何处理if(computeDistance>1500){letcomputeHeading=TMap.geometry.computeHeading(arr[0],arr[1]);//根据computeHeading，得到当前点的角度letdu;//这个变量只是为了防止由于箭头顶部与图标重叠而声明的反向角度if(computeHeading>0){du=computeHeading-180;//由于地图坐标系中只有[180,-180]，所以进行逆时针转换}else{du=computeHeading+180;}//path0是根据computeDestination反向得到的新箭头顶点的坐标//其中200是图标到顶点的距离，可以调整letpath0=TMap.geometry.computeDestination(arr[1],杜，200）；//top1,top2是从画箭头的角度得到的，//因为地图坐标系中只有[180,-180]，所以把时间倒过来针头转换//我这边偏40度，140度，220度，可调lettop1=this.computeRotaion(computeHeading+140);让top2=this.computeRotaion(computeHeading+220);//path1,path2是根据箭头的坐标，估计绘制的线段的长度，和角度，得到箭头两边的点坐标letpath1=TMap.geometry.computeDestination(path0,top1,1200);让path2=TMap.geometry.computeDestination(path0,top2,1200);//console.log("path1",path1);//按照箭头的三个点左边绘制，这里也可以绘制覆盖多边形索引，indexli，可以修改或者取消，只要This.polylineLayer.add({styleId:"style_blue",id:"pl1_"+index+"_"+indexli,路径:[path0,path1],});this.polylineLayer.add({styleId:"style_blue",id:"pl2_"+index+"_"+indexli,paths:[path0,path2],});//根据不同的长度做不同的规划，根据超过10000米的长度，我这里做中间的箭头，原理同上//if(computeDistance>10000){//先得到中点坐标letpathzhong=TMap.geometry.computeDestination(arr[1],du,计算距离/2);//path3,path4为中间箭头两边的点坐标，令path3=TMap.geometry.computeDestination(pathzhong,top1,1200);letpath4=TMap.geometry.computeDestination(pathzhong,top2,1200);//根据三点坐标画线，做箭头索引，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){letrotation;if(heading>180){rotation=heading-360;}else{旋转=航向;}returnrotation;}评论里有完整的解释，需要耐心阅读，也可以根据自己的情况修改。这里我没有打包，但是可以正常使用。如果需要多组件调用需要自己封装。我这里就不拿出我需要的包裹了。毕竟需求不同。总结：希望多提意见和更好的建议。可以留言，虚心学习！卑微的小刘！
