vue中使用高德地图自定义行政区划聚合

 先看实现效果(上传图片说是违规，我也不知道为啥，所以就把图片删了)：

找了很多，都直接是官方的数据，反复查看官方文档，终于完美解决。如果能够帮到你，欢迎大家点赞收藏加关注，多多交流，互相学习，共同进步！！！！

直接上代码： 

<template>
    <div id="map_index"></div>
</template>
<script>
export default {
    name:"ditu",
    data(){
        return{
            amap:null,
            zoom:4,
            pointData:[],
        }
    },
    methods: {
        getAMap(){
            let map = new AMap.Map('map_index', {
                resizeEnable: true,
                zoom: this.zoom,
                center: [104.676809,37.290981],
            });
            this.amap = map
            this.loadDistrictCluster();
        },
        loadDistrictCluster(){
            let cur = this
            AMapUI.load(['ui/geo/DistrictCluster', 'lib/$'], function(DistrictCluster) {
                //启动页面
                cur.initPage(DistrictCluster,$);
            });
        },
        initPage(DistrictCluster,$){
            let distCluster = new DistrictCluster({
                map: this.amap,
                zIndex:11,
                autoSetFitView:false,
                boundsQuerySupport:true,//范围查询
                getPosition: function(item) {
                    return item.position;
                }
            });
            distCluster.setData(this.pointData);
        },
        getRangePoints() {//数据获取
            let data1 = [];
            carLnglat().then(res=>{
                if(res.code === 200){
                    res.data.forEach(element => {
                        let lnglat = element.split(",");
                        data1.push({
                            position: [parseFloat(lnglat[0]),parseFloat(lnglat[1])]
                        })
                    })
                }
            })
            this.pointData = data1
        }
    },
    mounted(){
        this.getRangePoints();
        this.getAMap();
    }
}
</script>

<style scoped>
    #map_index{
        width: 100%;
        height: 100%;
    }
</style>