vue使用天地图聚合点，点击标记点弹出信息窗口

1.先要在天地图中申请秘钥，具体过程就不展示了，个人开发者申请到秘钥之后，每个tk有上限。可以多申请几个，利用随机来使用。（每人最多申请五个秘钥）

下面这个是利用随机数组元素写的一个index.html中的引用：

<script>
    var tk =''
    var tkArr = ['你的秘钥1'，'你的秘钥2'，'你的秘钥3'，'你的秘钥4'，'你的秘钥5']
    tk = tkArr[Math.floor(Math.random() * tkArr.length)];
    var url = 'http://api.tianditu.gov.cn/api?v=4.0&tk=' + tk
    // console.log(url);
     function addScript(){
        var script = document.createElement('script')
        script.setAttribute('type','text/javascript')
        script.setAttribute('src', url)
        document.getElementsByTagName('head')[0].appendChild(script)
     }
     addScript()
  </script>

2.在地图页面中,首先需要有一个div放地图，其次在再地图上面做聚合，弹出信息窗口功能：

下面是html的内容，由于项目中点过多加了一个正在加载：

 <div style="width:100%;height:90vh;" id="map" v-loading="loading"  element-loading-text="拼命加载中"></div>

下面是初始化地图的代码： 

 // 初始化天地图
     initTdtMap(){
       var T = window.T;
      this.map = new T.Map('map',{
        minZoom: 3,   //设置最小缩放级别
      });
        //设置显示地图的中心点和初始缩放级别
        this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 4);   
        this.initMarker()      
      },

下面是获取数据，渲染聚合点，并点击标记点弹出信息窗口的代码：

  //初始化聚合点
      initMarker(){
        var T = window.T;
        this.markers = []
        //这里要用自己的接口请求数据
        a(this.queryParams).then((res)=>{
            if(res.code == 200){
              var icon = new T.Icon({
                  iconUrl: '你的icon图片地址', 
                  iconSize: new T.Point(30, 30),
                  iconAnchor: new T.Point(0, 0)
              })
              //把每条数据都变成一个marker点
              res.data.forEach((item)=>{
                var marker = new T.Marker(new T.LngLat(item.longitude, item.latitude) , {icon:icon});
                //把每个marker点push到markers数组中
                this.markers.push(marker)
                //信息窗口
                let markerInfoWin = new T.InfoWindow('你自己的html',{
                  autoPan: true,
                  minWidth: 100,
                })
               //给每个marker点添加监听点击事件打开信息窗口
                marker.addEventListener('click', function() {
                    marker.openInfoWindow(markerInfoWin);
                })
              }) 
            //利用聚合点组件，完成点聚合功能
            this.clusterObject = new T.MarkerClusterer(this.map, { markers: this.markers,
             girdSize:60,
            //聚合点自定义样式
             styles:[
                {
                  url:'你自己的图片',
                  size:[30, 26], //图片大小
                  offset:new T.Point(-15, -13), //显示图片的偏移量
                  textColor:'black', //显示数字的颜色
                  // textSize:6,//显示文字的大小
                  range:[0, 50],
                }, {
                  url:'你自己的图片',
                  size:[42, 36],
                  offset:new T.Point(-20, -17),
                  textColor:'black',
                  // textSize:10,
                  range:[50, 500],
                }, {
                  url:'你自己的图片',
                  size:[62, 56],
                  soffset:new T.Point(-10, -22),
                  textColor:'black',
                  // textSize:12,
                  range:[500, 1000],
                }, {
                  url:'https://webapi.amap.com/theme/v1.3/m4.png',
                  size:[72, 66],
                  soffset:new T.Point(-10, -22),
                  textColor:'black',
                  // textSize:12,
                  range:[1000, 5000],
                }, {
                  url:'你自己的图片',
                  size:[82, 76],
                  // soffset:new T.Point(-10, -22),
                  textColor:'black',
                  // textSize: 6,
                  range:[5000, 10000],
                }, {
                  url:'你自己的图片',
                  size:[82, 76],
                  // soffset:new T.Point(-10, -22),
                  textColor:'black',
                  // textSize: 6,
                  range:[10000, 100000],
                }
              ]
             
             })
              // 设置聚合图标的最大层级，也就是说当到达16级时，所有聚合的点会全部
              this.clusterObject.setMaxZoom(16)
              this.loading = false
            } 
        })
      }

注意：这里我用天地图原生的聚合点的样式，图片怎么都请求不出来，有报错301的有报错跨域的，最后没找到解决方法，所有直接使用了自定义的聚合样式。

下面是最终效果：