vue如何实现百度地图绘制方向箭头折线

这篇文章主要为大家展示了vue如何实现百度地图绘制方向箭头折线，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。

渑池网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。成都创新互联从2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。

在开发过程中发现 vue-baidu-map 封装的 BmPolyline 折线组件不能顺利绘制出带箭头的纹理。

原因是 BmPolyline 文档中虽然有 icons 属性，但是对应的源文件中并没有props接收 icons

最初的开发思路：

根据 vue-baidu-map 折线组件的官方文档，在vue中通过Prop，为 BmPolyline 组件传递一个 icons 数组，数组的元素必须为 IconSequence 类的实例对象。

而 IconSequence 类的实例对象则是在 BaiduMap 组件的 ready 事件中拿到 BMap 类和 map 地图实例对象，然后依次调用 BMap 基类的 Symbol ， IconSequence 子类，完成 IconSequence 对象的初始化。具体参数含义及代码实现见上文发的官方案例地址。

按照上述思路完成代码编写后并不能得到预期中的结果。因为 BmPolyline 对应的源文件中并没有props接收 icons 。

解决方案

将 /node_modules/vue-baidu-map/components/overlays 目录下的 BmPolyline 源文件复制，粘贴到另一个vue文件中，然后手动为折线组件配置 icons

详细解决方案见下方代码：

new_polyline.vue新的折线组件文件

地图文件

以上就是关于vue如何实现百度地图绘制方向箭头折线的内容，如果你们有学习到知识或者技能，可以把它分享出去让更多的人看到。