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//像素
          })

高德地图给多个点加载消息窗体，还能触发点击事件

地图绑定点击事件

 <div id="allmap" @click="getMapClickEvent"></div>

注意data-id与data-title就是自定义的属性，通过e.data还能获得点击的对象的信息

let info = [];
          mass.on('click',(e)=>{
            info=[]
        info.push("<div class='input-card content-window-card'><div class='map_mark_title'>"+this.$t('devicei_nformation')+"</div> ");
        info.push('<div class="map_mark_info"><div class="list"><div class="list_left">' + this.$t('devices_name') + ':</div><div class="list_right">' + e.data.wellName + '' + '</div></div>');
        info.push('<div class="list"><div class="list_left">' + this.$t('equipment_type') + ':</div><div class="list_right">' + getDeviceTypeList(e.data.deviceTypeId) + '</div></div>');
        info.push('<div class="list"><div class="list_left">'+this.$t('water_alarm_state')+':</div></div>')
        info.push('<button class="btn-info" data-id="'+e.data.id+'" data-title="isWellDeviceInfo">' + this.$t('details') + '</button>')
        info.push('<button  class="btn-info btn-del" >' + this.$t('delete') + '</button>')
        info.push('<button class="btn-info" >' + this.$t('logs') + '</button></div>')
           let infoWindow = new AMap.InfoWindow({
            content: info.join(""),  //使用默认信息窗体框样式，显示信息内容
            offset: new AMap.Pixel(16, -45)
        });
          infoWindow.open(this.map,[e.data.longtitude,e.data.latitude] );
            })

然后就能获得点击事件的信息了

getMapClickEvent (e) {
      let dom = e.target
      let clickBtn = dom.getAttribute('data-title')
      let clickId = dom.getAttribute('data-id')
      }

附上css样式

.custom-input-card{
    width: 18rem;
}

.custom-input-card .btn:last-child{
    margin-left: 1rem;
}

.content-window-card{
    position: relative;
    width: 23rem;
    padding: 0.75rem 0 0 1.25rem;
    box-shadow: none;
    bottom: 0;
    left: 0;
}

.content-window-card p{
    height: 2rem;
}

.map_mark_title{
    border-bottom: 1px #ccc solid;
    padding: 5px 10px;
    font-weight: bold;           
}

.map_mark_info{
    .list{
        width: 400px;
        line-height: 2;
        .list_left{
            color: rgb(164,164,164);
            width: 80px;
            text-align: right;
            display: inline-block;
        }
        .list_right{
            text-align: left;
            display: inline-block;
            margin-left: 10px;
        }
    }
}

.btn-info{
    background: rgb(102,173,239);
    border: 0;
    padding: 4px 8px;
    margin: 0 5px;
    color: #fff;
    border-radius: 4px;
}
.btn-del{
    background: rgb(254,91,83) !important;
}