vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解

在开发过程中发现 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新的折线组件文件

地图文件

  <div class="container">  = 2 && checkPoints({ points })" :path="points" :icons="icons" stroke-color="#0091ea" :stroke-opacity="0.8" :stroke-weight="10"></div> .map { width: 100%; height: 300px; } 

到此这篇关于vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解的文章就介绍到这了,更多相关vue 百度地图方向箭头折线内容请搜索gaodaima搞代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持gaodaima搞代码网！