请选择时期:
怀孕准备 怀孕 分娩 宝宝0-1岁 宝宝1-3岁 宝宝3-6岁

Map.vue基于百度地图组件重构笔记教程

来源: 最后更新:22-11-26 03:02:48

导读:Map.vue基于百度地图组件重构笔记教程 Map.vue是为iview组件开发的一个基于百度地图的组件,实现了点是否在框内的判断,画多边形覆盖物,添加自定义富

  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

  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);

标签: 对象  函数  事件  

免责声明:本文系转载,版权归原作者所有;旨在传递信息,其原创性以及文中陈述文字和内容未经本站证实。

本文地址:http://www.jxyuer.com/qiaomen/youxi/447715.html

声明: 本站文章均来自互联网,不代表本站观点 如有异议 请与本站联系 联系邮箱:jxyuer#foxmail.com (请把#替换成@)

关于我们 | 广告服务 | 网站合作 | 免责声明 | 联系我们| 网站地图

© 2022-2024 江西育儿网 all rights reserved. 沪ICP备2023005727号-3