Map.vue基于百度地图组件重构笔记分享

  

Map.vue是为iview组件开发的一个基于百度地图的组件,实现了点是否在框内的判断,画多边形覆盖物,添加自定义富文本标记物等功能。

  

<强>第一步:重构自定义的富文本对象,设置为全局对象。

  

原代码的富文本对象是声明在addResource这个方法里面的,代码结构非常复杂,在beforeCreate这个钩子函数里面申明为全局的,就可以多次复用,不需要重复声明来了,否则,每调用一次paintPolygon方法,都要重新声明一次,非常麻烦,效率太低下。

  

原代码是在父组件中处理好这个富文本对象需要的数据,再把这些数据传到富文本对象的构造函数里面,重构的处理方式,是将一整个数据对象(数据对象)传到对象的构造函数里面,再根据需求,分解数据对象来声明对象的属性(这一点。_content |。_point | this._color等)。总结下来,数据总是应该在最靠近使用数据的地方进行处理。

        窗口。ResOverlay=function(数据、有趣){   这一点。_data=https://www.yisu.com/zixun/data   这一点。_content['类型']. name=数据+ +数据“|”(“名字”)   这一点。_point=new BMap.Point(数据。coord [0], data.coord [1])   这一点。_fun=e=比;{   有趣的(数据)   如果(typeof (e.preventDefault())==昂?{   e.preventDefault ()//IE下去除地图点击事件的冒泡   其他}{   e.stopPropagation()//铬下去除地图点击事件的冒泡   }   }   这一点。_color=数据(“类型”)。色| |“# 5 cadff”//不同类型的资源有不同的颜色,默认颜色为# 5 cadff。   }   之前      

<强>第二步:函数传递

  

需要为富文本添加电脑端的点击事件和移动端的touchstart事件。涉及到要操作父组件中数据的数据,所以采用将函数有趣作为参数传入

  

父组件请求回数据再做处理,rep.data.data。资源为数据,乐趣就是https://www.yisu.com/zixun/data=> {}

  

        http.get美元。(“/api/搜索”)。(代表=比;{   refs.main.addResource美元(rep.data.data。资源,https://www.yisu.com/zixun/data=> {   这一点。resourceName=数据(“名称”)   这一点。resourceType数据(“类型”). name=这一点。resourceUpdata=https://www.yisu.com/zixun/data(“上传”)   这一点。resourcePosition=数据(“coord”)   console.log(数据(“附件”))      让allList=[]   数据(“附件”)。地图(i=比;{   让tempList=[]   tempList.push(我)   tempList.push (i.split (“/? [i.split (“/?。长度- 1)   allList.push (tempList)   })      这一点。resourceDetial=allList//为资源添加图像   (让我=0;i<(“图像”). length的数据;我+ +){   this.resourceImage.push(数据(“图像”)[我])   }   如果(数据(“图像”)。长度比;0){   这一点。isExistImage=true   其他}{   这一点。isExistImage=false   }//为资源添加附件   如果(数据(“附件”)。长度比;0){   这一点。isExistAttach=true   其他}{   这一点。isExistAttach=false   }//显示模态框   这一点。modal1=true   })   })      之前      

在构造函数中,这样子处理

        这一点。_fun=e=比;{   有趣的(数据)   如果(typeof (e.preventDefault())==昂?{   e.preventDefault ()//IE下去除地图点击事件的冒泡   其他}{   e.stopPropagation()//铬下去除地图点击事件的冒泡   }   }   之前      

最后,在合适的位置,添加事件

        wrapDiv。addEventListener (“touchstart”, this._fun);   wrapDiv。addEventListener(“点击”,this._fun);   之前      

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

  

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

Map.vue基于百度地图组件重构笔记分享