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


Posted in Javascript onApril 17, 2017

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.stopPropagation() // 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.stopPropagation() // chrome下去除地图点击事件的冒泡
 }
}

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

wrapDiv.addEventListener("touchstart", this._fun);
 wrapDiv.addEventListener("click", this._fun);

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

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

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

Javascript 相关文章推荐
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
javascript数组的定义及操作实例
Nov 10 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
JS简单验证上传文件类型的方法
Apr 17 #Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 #Javascript
巧用weui.topTips验证数据的实例
Apr 17 #Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 #jQuery
bootstrap select插件封装成Vue2.0组件
Apr 17 #Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 #Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 #Javascript
You might like
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
javascript与webservice的通信实现代码
2010/12/25 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
Python 文件操作实现代码
2009/10/07 Python
python通过yield实现数组全排列的方法
2015/03/18 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
python 装饰器的使用示例
2020/10/10 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
LINUX下线程,GDI类的解释
2012/04/17 面试题
销售员岗位职责范本
2014/02/03 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
家长会欢迎标语
2014/06/24 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python
Html5生成验证码的示例代码
2021/05/10 Javascript
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
python开发飞机大战游戏
2021/07/15 Python
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫