test/test-vue-amap.html

<!DOCTYPE html>
<html>
  <head>
    <title>demo | vue-amap</title>
    <meta charset="UTF-8">
    <style>
      #app {
        min-height: 700px;
      }
      #amap {
        min-height: 700px;
      }
      .amap-demo {
        .height: 300px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <el-amap
          vid="amap"
          :center="center"
          :zoom="zoom"
          class="amap-demo"
          :events="events">
        <el-amap-marker v-for="marker in markers" :position="marker.position"
          :content="marker.content" :events="marker.events"
            >
        </el-amap-marker>
      </el-amap>
    </div>
  </body>
  <!-- 先引入 Vue -->
  <script src="../source/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../source/vue-amap.js"></script>
  <script>
    // 初始化高德地图的 key 和插件
    window.VueAMap.initAMapApiLoader({
      key: '93fc94012de7fd139283557b8d04534d',
      plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor', 'AMap.MarkerClusterer'],
      // 默认高德 sdk 版本为 1.4.4
      v: '1.4.4'
    });

    var vm = new Vue({
      el: '#app',
      data: {
        zoom: 12,
        center: [121.59996, 31.197646],
        markers: [],
        markerRefs: [],
        events: {
          init(o) {
            var scope = vm;
            setTimeout(() => {
              console.log(scope.markerRefs);
              let cluster = new AMap.MarkerClusterer(o, scope.markerRefs,{
                gridSize: 80,
                renderCluserMarker: scope._renderCluserMarker
              });
              console.log(cluster);
            }, 1000);
          },
          click(o) {
            alert(2);
            debugger;
          },
        }
      },
      created: function() {
        let scope = this;
        let markers = [];
        let index = 0;

        let basePosition = [121.59996, 31.197646];

        while (++index <= 30) {
          markers.push({
            position: [basePosition[0], basePosition[1]],
            content: '<div style="text-align:center; background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
            events: {
              init(o) {
                scope.markerRefs.push(o);
              },
              click(o) {
                debugger;
              },
            }
          });
        }

        this.markers = markers;
      },
      methods: {
        _renderCluserMarker(context) {
          const count = this.markers.length;

          let factor = Math.pow(context.count/count, 1/18)
          let div = document.createElement('div');
          let Hue = 180 - factor* 180;
          let bgColor = 'hsla('+Hue+',100%,50%,0.7)';
          let fontColor = 'hsla('+Hue+',100%,20%,1)';
          let borderColor = 'hsla('+Hue+',100%,40%,1)';
          let shadowColor = 'hsla('+Hue+',100%,50%,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 1px '+ 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)
        },
      },
    });
  </script>
</html>