首先引入高德插件

        高德点聚合示例
        引入插件到index.html

<script src="//a.amap.com/jsapi_demos/static/china.js"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.MarkerCluster"></script> 

        之后如果遇到这个报错：AMap` is not defined no-undef

        且没有.eslintrc.js，可以在用到高德地图的组件中再次引入高德插件接口。

直接上代码

<template><div class="hello"><div id="mapContainer"></div></div>
</template><script src="https://webapi.amap.com/maps?v=2.0&key==您申请的key值AMap.MarkerCluster"></script>
<script src="https://a.amap.com/jsapi_demos/static/china.js"></script>
<script>export default {name: 'HelloWorld',data() {return {map: null,cluster: null,points: [],}},mounted() {this.initMap();},methods: {initMap() {this.map = new AMap.Map("mapContainer", {resizeEnable: true,center: [105, 42],zoom: 4,});// console.log(points)this.points = points;this.addCluster();},addCluster(tag) {if (this.cluster) {this.cluster.setMap(null);}this.cluster = new AMap.MarkerCluster(this.map, this.points, {gridSize: 80,minClusterSize: 2, //1.x版本的把这里改成1就可以实现点数为1的水波纹效果，2.0的需要用_renderMarkerrenderClusterMarker:  this._renderClusterMarker, // 自定义聚合点样式renderMarker: this._renderMarker, // 自定义非聚合点样式});//默认样式// this.cluster = new AMap.MarkerCluster(this.map, this.points, {gridSize: 80});},_renderClusterMarker(context) {var count = this.points.length;var factor = Math.pow(context.count / count, 1 / 18);var div = document.createElement('div');var Hue = 180 - factor * 180;var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';var fontColor = 'hsla(' + Hue + ',100%,90%,1)';var borderColor = 'hsla(' + Hue + ',100%,40%,1)';var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';// div.style.backgroundColor = bgColor;var 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;var content = `<divclass="circle-marker-content"><span class="item_count">${context.count}</span><div class="item item1"style='height:${size}px;width:${size}px;'></div><div class="item item2" style='height:${size + 0.4}px;width:${size + 0.4}px;'></div><div class="item item3" style='height:${size + 0.8}px;width:${size + 0.8}px;'></div><div class="item item4" style='height:${size + 1.2}px;width:${size + 1.2}px;'></div><div class="item item5" style='height:${size + 1.6}px;width:${size + 1.6}px;'></div></div>`div.innerHTML = content;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)},_renderMarker(context) {var content = `<divclass="circle-marker-content"><span class="item_count">1</span><div class="item item1"style='height:18px;width:18px;'></div><div class="item item2" style='height:18.4px;width:18.4px;'></div><div class="item item3" style='height:18.8px;width:18.8px;'></div><div class="item item4" style='height:19.2px;width:19.2px;'></div><div class="item item5" style='height: 19.6px;width: 19.6px;'></div></div>`;var offset = new AMap.Pixel(-9, -9);context.marker.setContent(content)context.marker.setOffset(offset)},},}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">#mapContainer {width: 800px;height: 800px;}@circleColor: #4196ff;/deep/ .circle-marker-content {position: absolute;top: 50%;left: 50%;height: 1.8vh;width: 1.8vh;transform: translate(-50%, -50%);border-radius: 100%;text-align: center;background: @circleColor;border: 1px solid @circleColor;box-shadow: 0px 0px 14px @circleColor;.item_count {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #1C77C3;font-weight: bold;font-size: 13px;z-index: 10;}@keyframes scaless {0% {/* transform: scale(0);  将0改成1*/transform: scale(1);opacity: 1;}100% {transform: scale(2);opacity: 0;}}.item {width: 100%;height: 100%;position: absolute;border-radius: 100%;top: 50%;left: 50%;transform: translate(-50%, -50%);}.item:before {content: "";position: absolute;left: -1px;top: -1px;display: inline-block;width: 100%;height: 100%;border: 1px solid @circleColor;border-radius: 100%;opacity: 0;background-color: @circleColor;animation: scaless 5s infinite cubic-bezier(0, 0, 0.49, 1.02);}.item1:before {animation-delay: 0s;}.item2:before {animation-delay: 1s;}.item3:before {animation-delay: 2s;}.item4:before {animation-delay: 3s;}.item5::before {animation-delay: 4s;}}
</style>

水波纹样式参考css实现水波纹
会用到less。需要安装less-loader，不要安装过高的版本，否则会报错：
this.getOptions is not a function

可以这样安装：npm install less-loader@6.0.0