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

怼烎@ 2023-01-03 04:48 322阅读 0赞

效果展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1MTAz_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1MTAz_size_16_color_FFFFFF_t_70 1]

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

开始要先引入

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1MTAz_size_16_color_FFFFFF_t_70]: /images/20221119/adb3a9353a2e4985ade703d526a3ee80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1MTAz_size_16_color_FFFFFF_t_70 1]: /images/20221119/129c5c49bd3a4b39b65ce31d47b97ef4.png