vue 百度地图(vue-baidu-map)绘制方向箭头折线

官方文档地址:

  • 百度地图 JavaScript API v3.0

  • vue-baidu-map

  • 原生JS在折线上添加方向箭头官方案例

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

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

最初的开发思路:

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

vue 百度地图(vue-baidu-map)绘制方向箭头折线_第1张图片

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

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

解决方案

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

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

new_polyline.vue 新的折线组件文件



地图文件






你可能感兴趣的:(爬坑,vue.js,百度,javascript,前端,html5)