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 相关文章推荐
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
js 多浏览器分别判断代码
Apr 01 Javascript
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
javascript实现简易的计算器
Jan 17 Javascript
JavaScript进制转换实现方法解析
Jan 18 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
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
PHP中header用法小结
2016/05/23 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
js中判断控件是否存在
2010/08/25 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
Promise.all中对于reject的处理方法
2018/08/01 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
js实现小星星游戏
2020/03/23 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
python检查指定文件是否存在的方法
2015/07/06 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
简单谈谈python中的多进程
2016/11/06 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
python微信公众号之关键词自动回复
2018/06/15 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
查看keras的默认backend实现方式
2020/06/19 Python
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
西雅图的买手店:Totokaelo
2019/10/19 全球购物
总经理驾驶员岗位职责
2013/12/04 职场文书
医大实习自我鉴定
2013/12/07 职场文书
安全协议书范本
2014/04/21 职场文书