腾讯地图实现点聚合，鼠标经过当前点显示项目详情，兼容移动端

实现效果图：

 <div id='mapContainer'></div>
<script>
  var map;
  var ClusterBubbleClick;
  var infoWindow;

  function init() {

      var drawContainer = document.getElementById('mapContainer');

      var center = new TMap.LatLng(39.953416, 116.380945);
      map = new TMap.Map('mapContainer', {
          zoom: 5,
          pitch: 10,
          center: center
      });

      // 创建点聚合
      var markerCluster = new TMap.MarkerCluster({
          id: 'cluster',
          map: map,
          enableDefaultStyle: false, // 关闭默认样式
          minimumClusterSize: 3,

          geometries: [{ // 点数组
                  position: new TMap.LatLng(37.128628, 80.063002)
              },
              {
                  position: new TMap.LatLng(39.984104, 116.407503)
              },
              {
                  position: new TMap.LatLng(39.908802, 116.497502)
              },
              {
                  position: new TMap.LatLng(40.040417, 116.373514)
              },
              {
                  position: new TMap.LatLng(39.953416, 116.380945)
              },
              {
                  position: new TMap.LatLng(39.984104, 116.307503)
              },
              {
                  position: new TMap.LatLng(39.908802, 116.397502)
              },
              {
                  position: new TMap.LatLng(40.040417, 116.273514)
              },
          ],
          zoomOnClick: true,
          gridSize: 10,
          averageCenter: true
      });
	
      var clusterBubbleList = [];
      var markerGeometries = [];
      var marker = null;

      // 监听聚合簇变化
      markerCluster.on('cluster_changed', function (e) {
          // 销毁旧聚合簇生成的覆盖物
          if (clusterBubbleList.length) {
              clusterBubbleList.forEach(function (item) {
                  item.destroy();
              })
              clusterBubbleList = [];
          }
          markerGeometries = [];

          // 根据新的聚合簇数组生成新的覆盖物和点标记图层
          var clusters = markerCluster.getClusters();
          var myIcon = '../images/map/ico1.png'; //高标仓图标
          var myIcon1 = '../images/map/ico2.png'; //冷链仓图标
          var businessType = '高标仓' //判断字段
          clusters.forEach(function (item) {


              //   console.log(item.geometries)

              if (item.geometries.length > 1) {
                  let clusterBubble = new ClusterBubble({
                      map,
                      position: item.center,
                      content: item.geometries.length,
                  });

					if(window.innerWidth<1000){
						
						clusterBubble.on('touchend', () => {
						    map.fitBounds(item.bounds);
						});
					}else{
						clusterBubble.on('click', () => {
						    map.fitBounds(item.bounds);
						});
					}
                 
                  clusterBubbleList.push(clusterBubble);
              } else {
                  markerGeometries.push({
                      position: item.center
                  });
              }
          });


          //初始化infoWindow
          var infoWindow = new TMap.InfoWindow({
              map: map,
              position: new TMap.LatLng(39.984104, 116.307503),
              offset: {
                  x: 0,
                  y: -15,
              }, //设置信息窗相对position偏移像素
          });
          var content =
              "<a href='mapdata.html' class='contxtmap'><div class='le'><img src='https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/em.jpg'></div><div class='ri'><h1>西宁海东园区</h1><h2>青海省海东市互助土族自治县高寨镇经十四路</h2><div class='p'><p>78100平</p><span>详情</span></div></div></a>"
          infoWindow.close(); //初始关闭信息窗关闭

          if (marker) {
              // 已创建过点标记图层，直接更新数据
              marker.setGeometries(markerGeometries);
          } else {
					var Paswi ;
					var Pashe ;
			  if(window.innerWidth<1000){
				  Paswi = 20;
				  Pashe = 25
				 
			  }else{
				 Paswi = 28;
				 Pashe = 35
			  }
              // 创建点标记图层
              marker = new TMap.MultiMarker({
                  map,
                  styles: {
                      default: new TMap.MarkerStyle({
                          'width': Paswi,
                          'height': Pashe,
                          'anchor': {
                              x: 17,
                              y: 21,
                          },
                          'src': businessType == '高标仓' ? myIcon : myIcon1,
                      }),
                  },
                  geometries: markerGeometries
              });

              // addMouseenterHandler(content, marker); //添加点击事件
			    if(window.innerWidth<1000){
					marker.on("touchend", function (evt) {
					    //设置infoWindow
					    infoWindow.open(); //打开信息窗
					    infoWindow.setPosition(evt.geometry.position); //设置信息窗位置
					    infoWindow.setContent(content); //设置信息窗内容
					});
				}else{
					marker.on("mouseover", function (evt) {
					    //设置infoWindow
					    infoWindow.open(); //打开信息窗
					    infoWindow.setPosition(evt.geometry.position); //设置信息窗位置
					    infoWindow.setContent(content); //设置信息窗内容
					});
				}
           

          }
      });
  }



  // 以下代码为基于DOMOverlay实现聚合点气泡
  function ClusterBubble(options) {
      TMap.DOMOverlay.call(this, options);
  }

  ClusterBubble.prototype = new TMap.DOMOverlay();

  ClusterBubble.prototype.onInit = function (options) {
      this.content = options.content;
      this.position = options.position;
  };

  // 销毁时需要删除监听器
  if(window.innerWidth<1000){
	  ClusterBubble.prototype.onDestroy = function () {
	      this.dom.removeEventListener('touchend', this.onClick);
	  
	      this.removeAllListeners();
	  };
	  
	  ClusterBubble.prototype.onClick = function () {
	      this.emit('touchend');
	  };
  }else{
	  ClusterBubble.prototype.onDestroy = function () {
	      this.dom.removeEventListener('click', this.onClick);
	  
	      this.removeAllListeners();
	  };
	  
	  ClusterBubble.prototype.onClick = function () {
	      this.emit('click');
	  };
  }
 

  // 创建气泡DOM元素
  ClusterBubble.prototype.createDOM = function () {
      var dom = document.createElement('div');
      dom.classList.add('clusterBubble');
      dom.innerText = this.content;
      dom.style.cssText = [
          'width: ' + (40 + parseInt(this.content) * 2) + 'px;',
          'height: ' + (40 + parseInt(this.content) * 2) + 'px;',
          'line-height: ' + (40 + parseInt(this.content) * 2) + 'px;',
      ].join(' ');

      // 监听点击事件，实现zoomOnClick
      this.onClick = this.onClick.bind(this);
      // pc端注册click事件，移动端注册touchend事件
      // console.log("ddd", dom)
	  if(window.innerWidth<1000){
		  dom.addEventListener('touchend', this.onClick);
	  }else{
		 dom.addEventListener('click', this.onClick); 
	  }
      
      return dom;
  };

  ClusterBubble.prototype.updateDOM = function () {
      if (!this.map) {
          return;
      }
      // 经纬度坐标转容器像素坐标
      let pixel = this.map.projectToContainer(this.position);

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

      this.emit('dom_updated');
  };

  window.ClusterBubble = ClusterBubble;

  </script>