这篇文章主要介绍了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新的折线组件文件
地图文件
到此这篇关于vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解的文章就介绍到这了,更多相关vue 百度地图方向箭头折线内容请搜索html中文网以前的文章或继续浏览下面的相关文章希望大家以后多多支持html中文网!
以上就是vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解的详细内容,更多请关注0133技术站其它相关文章!