高德地图之marker点击事件（给每个marker添加点击事件）

从接口获取数据

创建聚合

//创建聚合
addMarker(positionData) {
   let map = this.getMap			//获取地图
   if (positionData.length) {
     this.markerList = []		//清空marker
   }
   for (let i = 0; i < positionData.length; i++) {
     if (positionData[i].lnglat[0] && positionData[i].lnglat[1]) {
       this.createMarker(positionData[i])		//添加marker
     }
   }
   let count = this.markerList.length
   this.$store.commit('setMarkerList', this.markerList)
   //设置聚合样式
   let renderClusterMarker = function (context) {
     let factor = Math.pow(context.count / count, 1 / 18)
     let div = document.createElement('div')
     let Hue = 180 - factor * 180
     let bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'
     let fontColor = 'hsla(' + Hue + ',100%,90%,1)'
     let borderColor = 'hsla(' + Hue + ',100%,40%,1)'
     let shadowColor = 'hsla(' + Hue + ',100%,90%,1)'
     div.style.backgroundColor = bgColor
     let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20)
     div.style.width = div.style.height = size + 'px'
     div.style.border = 'solid 1px ' + borderColor
     div.style.borderRadius = size / 2 + 'px'
     div.style.boxShadow = '0 0 5px ' + shadowColor
     div.innerHTML = context.count
     div.style.lineHeight = size + 'px'
     div.style.color = fontColor
     div.style.fontSize = '14px'
     div.style.textAlign = 'center'
     context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
     context.marker.setContent(div)
   }
   //设置marker位置偏移
   let renderMarker = function (context) {
     let content = ''
     let offset = new AMap.Pixel(-9, -9)
     context.marker.setContent(content)
     context.marker.setOffset(offset)
   }
   if (this.cluster == null) {			//显示所有marker
     this.cluster = new AMap.MarkerClusterer(map, this.markerList, {
       gridSize: 80,
       renderClusterMarker: renderClusterMarker,
       renderMarker: renderMarker, 		// 自定义非聚合点样式
     })
     //地图大小跟随marker分布自适应
     map.setFitView(this.markerList)
   } else {								//显示传入的marker
     this.cluster.addMarkers(this.markerList)
   }
 },

然后给聚合的每个marker添加点击事件

//创建marker
createMarker(data) {
  if (data != null) {
  	//设置marker图标样式
    let icon = new AMap.Icon({
      size: new AMap.Size(50, 50), // 图标尺寸
      image: this.typeUrl[data.terminalType - 1].url, // Icon的图像
      imageSize: new AMap.Size(24, 24), // 根据所设置的大小拉伸或压缩图片
    })
    //设置marker位置
    let markerOption = {
      icon: icon,
      position: [parseFloat(data.lnglat[0]), parseFloat(data.lnglat[1])],
      offset: new AMap.Pixel(-13, -30),
    }
    let marker = new AMap.Marker(markerOption)
    //给marker添加属性
    marker.setExtData(data)
    //给marker添加点击事件
    marker.on('click', this.markerClick)
    this.markerMap[data.terminalId] = marker
    this.dataMap[data.terminalId] = data
    this.markerList.push(marker)
  }
},
 //marker点击事件
 markerClick(e) {
   //e.target.getExtData() 获取点击的marker属性 然后显示当前marker详情
   this.showInfo(e.target.getExtData())
 },

效果图

初始样式

放大之后显示marker

点击marker，显示详情