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如何实现百度地图绘制方向箭头折线的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。
分享名称:vue如何实现百度地图绘制方向箭头折线
标题网址:http://myzitong.com/article/pjjojh.html