Map.vue基于百度地图组件重构笔记分享
网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要为大家分享了Map.vue基于百度地图组件重构笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Map.vue是为iview组件开发的一个基于百度地图的组件,实现了点是否在框内的判断,画多边形覆盖物,添加自定义富文本标记物等功能.
第一步:重构自定义的富文本对象,设置为全局对象.
原代码的富文本对象是声明在addResource这个方法里面的,代码结构非常复杂,在beforeCreate这个钩子函数里面申明为全局的,就可以多次复用,不需要重复声明来了, 否则,每调用一次paintPolygon方法,都要重新声明一次,非常麻烦,效率太低下.
原代码是在父组件中处理好这个富文本对象需要的数据,再把这些数据传到富文本对象的构造函数里面,重构的处理方式,是将一整个数据对象(data对象)传到对象的构造函数里面,再根据需求,分解data对象来声明对象的属性(this._content | this._point | this._color等). 下来,数据总是应该在最靠近 使用数据的地方 进行处理.
window.ResOverlay = function(data, fun){ this._data = data this._content = data['type'].name + "|" + data['name'] this._point = new BMap.Point(data.coord[0], data.coord[1]) this._fun = e => { fun(data) if(typeof(e.preventDefault()) == 'function'){ e.preventDefault() // IE下去除地图点击事件的冒泡 }else{ e.sPropagation() // chrome下去除地图点击事件的冒泡 } } this._color = data['type'].color || "#5cadff" // 不同类型的资源有不同的颜色,默认颜色为#5cadff。 }
第二步:函数传递
需要为富文本添加电脑端的click事件和移动端的touchstart事件.涉及到要操作父组件中的data数据,所以采用将函数fun作为参数传入
父组件请求回数据再做处理,rep.data.data.resources为data,fun就是 data => {}
this.$http.get('/api/search').then(rep => { this.$refs.main.addResource(rep.data.data.resources, data => { this.resourceName = data["name"] this.resourceType = data["type"].name this.resourceUpdata = data["uploader"] this.resourcePosition = data["coord"] console.log(data["attachment"]) let allList = [] data["attachment"].map(i => { let tempList = [] tempList.push(i) tempList.push(i.split("/")[i.split("/").length - 1]) allList.push(tempList) }) this.resourceDetial = allList // 为资源添加图像 for(let i=0; i<data["images"].length; i++){ this.resourceImage.push(data["images"][i]) } if (data["images"].length > 0){ this.isExistImage = true }else{ this.isExistImage = false } // 为资源添加附件 if (data["attachment"].length > 0){ this.isExistAttach = true }else{ this.isExistAttach = false } // 显示模态框 this.modal1 = true }) })
在构造函数中,这样子处理
this._fun = e => { fun(data) if(typeof(e.preventDefault()) == 'function'){ e.preventDefault() // IE下去除地图点击事件的冒泡 }else{ e.sPropagation() // chrome下去除地图点击事件的冒泡 } }
,在合适的位置,添加事件
wrapDiv.addEventListener("touchstart", this._fun); wrapDiv.addEventListener("click", this._fun);
本文已被整理到了《》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:微信小程序商城项目之侧栏分类效果(1)
下一篇:JS简单验证上传文件类型的方法
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程