高德地图 点聚合功能加点击事件

效果展示

放大缩小地图层级时,点位会自动聚合或分散
主要用到的方法是 聚合点插件:AMap.MarkerClusterer
高德地图官方api：https://lbs.amap.com/api/javascript-api/reference/plugin#AMap.MarkerClusterer

开始要先引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己的key"></script>

<template>
    <div class="hot_wrapper">
        <div style="height:100%;width:100%;outline: none!important;" id="container" tabindex="0"> </div>
    </div>
</template>
<script>
import AMap from "AMap";
import API from '../../utils/httpConfig'
export default {
    props:['typeMap','activedIndex'],
    data() {
        return {
            mapData:[],//经纬度数据
            unitId:'',//单位id
        }   
    },
    methods: {   
        initMap() {// 创建地图
            var that = this
            this.map = new AMap.Map('container', {
                zoom:10,
                zooms: [7,17],
                center:[120.535719,29.856348],
                resizeEnable: true,
                showIndoorMap: false,
                mapStyle:"amap://styles/0206dfbcbabc11e4971c1a2e6bcdda2e",
                features:['point','road','bg'],//地图要素
                viewMode:"2D",
                pitch:45,
                zoomEnable:true,
            })
                var sts = [
                    {
                        url:'https://oss-kaleidoscope.oss-cn-hangzhou.aliyuncs.com/unit/1592186152091-地图.png',
                        size:new AMap.Size(80, 80),
                        textSize:15,
                        offset: new AMap.Pixel(0, 0),
                        textColor:'#ffffff',
                    },
                    {
                        url:'https://oss-kaleidoscope.oss-cn-hangzhou.aliyuncs.com/unit/1592186152091-地图.png',
                        size:new AMap.Size(103, 103),
                        offset: new AMap.Pixel(0, 0),
                        textColor:'#ffffff',
                        textSize:20,
                    },
                    {
                        url:'https://oss-kaleidoscope.oss-cn-hangzhou.aliyuncs.com/unit/1592186152091-地图.png',
                        size:new AMap.Size(123, 123), 
                        offset: new AMap.Pixel(0, 0),
                        textColor:'#ffffff',
                        textSize:25,

                    }
                ];
                var prepareToShowMarker=[];
                var markersss=[],cluster;
                prepareToShowMarker=JSON.parse(JSON.stringify(that.mapData))
                prepareToShowMarker.forEach(function(marker){
                    var markera=new AMap.Marker({
                        position: [marker.longitude, marker.latitude],
                        offset: new AMap.Pixel(-15, -15),
                        content:`<div style="height: 60px;line-height:60px;text-align:center;color:#fff; width: 60px;">1</div>`
                    });
                    //给标记点添加点击事件
                    markera.on("click",function(e){//给每一个点位增加点击事件
                        alert('aaaaaaa')
                    }); 
                    markersss.push(markera)

                })

                that.map.plugin(["AMap.MarkerClusterer"],function() {//实现聚合点功能
                    cluster = new AMap.MarkerClusterer(that.map, markersss, {
                        styles:sts,
                         gridSize: 80
                    });
                });

        },
        getMapData(){//获取经纬度信息
            this.axios({
               url:API.unitMapList,
               method:'POST',
               data:{
                  unitId:this.unitId,
               },
            }).then( res => {
                if ( res.data.code === 0 ) {
                    this.mapData=res.data.data;//经纬度数据
                    this.initMap();//创建地图
                }else{
                    this.$message.error(res.data.msg)
                }
            })
        },
    
        

    },
    mounted() {
        this.unitId=sessionStorage.getItem('unitId');
        this.getMapData();//获取经纬度数据
    },

}
</script>

<style lang="scss" scoped>
    .hot_wrapper{
        height: 100%;
        width: 100%;
        .container{
            height: 100%;
            width: 100%;
        }
    }
    /deep/ .amap-marker-content{
        width: 150px;
        height: 150px;
        &>div{
            background-image:url('https://oss-kaleidoscope.oss-cn-hangzhou.aliyuncs.com/unit/1592186152091-地图.png');
            background-size: 100%;
            
        }
    }
</style>