腾讯地图使用DOMOverlay实现多文本标记

在腾讯地图的文本标记示例中为文本标记加上背景色和padding后，单个文本的标记的显示是正常的，如（图1）。但是如果添加了多个文本标记后，文本标记的长度会出现bug，文本标记越多，单个文本的长度就会越长，如（图2）。所以决定使用DOMOverlay自定义覆盖物来实现多文本标记

                                                                         （图1） 

                                                                     （图二）

DOMOverlay封装代码如下
 

// 自定义DOM覆盖物 - 继承DOMOverlay
// 以下代码为基于DOMOverlay实现聚合点气泡
class LabelCluster extends TMap.DOMOverlay {
  constructor (options) {
    super(options)
    // 移动端touchmove事件执行时需禁止触发touchend
    this.enableClick = true
  }

  onInit (options) {
    this.content = options.content
    this.position = options.position
  }

  // 销毁时需要删除监听器
  onDestroy () {
    this.dom.removeEventListener('click', this.onClick)
    this.dom.removeEventListener('touchend', this.onTouchEnd)
    this.dom.removeEventListener('touchmove', this.onTouchMove)
    this.removeAllListeners()
  }

  // 点击事件
  onClick (e) {
    this.emit('click', e)
  }

  // 移动端触摸结束事件
  onTouchEnd (e) {
    // 移动端的触摸移动后禁止触发touchend事件
    if (!this.enableClick) {
      this.enableClick = true
      return
    }
    this.emit('touchend', e)
  }

  // 移动端触摸移动事件
  onTouchMove (e) {
    // 移动端的触摸移动后禁止触发touchend事件
    this.enableClick = false
    this.emit('touchmove', e)
  }

  // 创建气泡DOM元素
  createDOM () {
    var dom = document.createElement('div')
    // 设置DOM样式
    dom.style.cssText = 'height:15px;max-width:120px;padding:5px;background:#fff;border:#ccc solid 1px;\
                        line-height:15px;font-size:12px;position:absolute;top:0px;left:0px;'
    dom.innerHTML = this.content

    // 监听点击事件，实现zoomOnClick
    this.onClick = this.onClick.bind(this)
    this.onTouchEnd = this.onTouchEnd.bind(this)
    this.onTouchMove = this.onTouchMove.bind(this)
    // pc端注册click事件，移动端注册touchend事件
    dom.addEventListener('click', this.onClick)
    dom.addEventListener('touchend', this.onTouchEnd)
    dom.addEventListener('touchmove', this.onTouchMove)
    return dom
  }

  // 更新
  updateDOM () {
    if (!this.map) {
      return
    }
    // 经纬度坐标转容器像素坐标
    const pixel = this.map.projectToContainer(this.position)

    // 使文本框中心点对齐经纬度坐标点
    const left = pixel.getX() - this.dom.clientWidth / 2 + 'px'
    const top = pixel.getY() - this.dom.clientHeight / 2 + 'px'
    this.dom.style.transform = `translate(${left}, ${top})`

    this.emit('dom_updated')
  }
}
export default LabelCluster

在代码中使用 

      var center = new TMap.LatLng(40.040074, 116.273519) // 设置中心点坐标
      // 初始化地图
      this.map = new TMap.Map('mapContainer', {
        center: center,
        zoom: 11
      })
      for (let index = 0; index < 100; index++) {
        const lat = 40.040074 + Math.random() * Math.random()
        const lon = 116.273519 + Math.random() * Math.random()
        // console.log(lat, lon)
        const center = new TMap.LatLng(lat, lon) // 设置中心点坐标
        const label = new LabelCluster({
          map: map,
          position: center, // 设置信息框位置
          content: 'hello World' // 设置信息框内容
        })
        //pc端使用click事件
        label.on('click', function (e) {
          console.log(e)
        })
          //移动端使用touchend事件
        label.on('touchend', function (e) {
          console.log(e)
          console.log('点击了文本')
        })
      }

效果如下图显示