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组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
