web端高德地图使用教程，使用vue框架

一、添加高德地图入口

<script src="https://webapi.amap.com/maps?v=1.4.10&key=您申请的key值&plugin=AMap.MarkerClusterer,AMap.Geocoder"></script>

MarkerClusterer：点聚合插件
Geocoder：地理编码与逆地理编码服务，提供地址与坐标间的相互转换

    let map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.397428, 39.90923],//中心点坐标
        zoom: 13//级别
    });

运用插件标注多个点

let cluster
 let markers = []
       for (let i = 0; i < this.allPoints.length; i += 1) {
        markers.push(new AMap.Marker({
          position: this.allPoints[i]['lnglat'],//获取点坐标，是经度和纬度的集合
          content: '<div style="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>',
          offset: new AMap.Pixel(-15, -15)
        }))
      }
       let sts = [{
            url: icon1,
            size: new AMap.Size(35, 35),
            offset: new AMap.Pixel(-17.5, -17.5)
          }, {
            url: icon2,
            size: new AMap.Size(35, 35),
            offset: new AMap.Pixel(-17.5, -17.5)
          }, {
            url: icon3,
            size: new AMap.Size(35, 35),
            offset: new AMap.Pixel(-17.5, -17.5)
          }, {
            url: icon4,
            size: new AMap.Size(35, 35),
            offset: new AMap.Pixel(-17.5, -17.5)
          }, {
            url: icon5,
            size: new AMap.Size(35, 35),
            offset: new AMap.Pixel(-17.5, -17.5)
          }, {
            url: icon6,
            size: new AMap.Size(35, 35),
            offset: new AMap.Pixel(-17.5, -17.5)
          }]
          cluster = new AMap.MarkerClusterer(map, markers, {
            styles: sts,
            gridSize: 80//像素
          })