vuejs+高德 实现选中省市区 地图平移到该区域并高亮 添加标点

 样品示例：

子组件封装代码

<template>
    <div>
        <div id="container">
        </div>
    </div>
</template>


<script>
//引入缺德地图
import AMapLoader from '@amap/amap-jsapi-loader'
//引入弹出框组件
let district;
let geoCorder;
let marker;
export default {
    props: {
        data: {
            type: Object
        }
    },
    data() {
        return {
            map: null,
            //标记点的位置信息
            mapData: [
                // {
                //     name: '佳林羽毛球馆',
                //     longitude: 114.344706,
                //     latitude: 38.051262,
                //     content: '室内羽毛球馆，全新地皮，干净整洁',
                //     img: 'https://n.sinaimg.cn/spider20220702/290/w1080h810/20220702/bdee-24bda60bf8b6cf30b658f25de78e12de.jpg'
                // },
                // {
                //     name: '牛春花板面',
                //     longitude: 114.343524,
                //     latitude: 38.049604,
                //     content: '好吃是好吃，吃完必上火，把子肉嘎嘎香',
                //     img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F25fac10a-1e66-4a6d-a4a1-4bf07d2666a1%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690684148&t=c2560eb44f5348fc210f74ccd4552555'
                // }
            ],
            // infoWindow: {}
            polygons: [],
        }
    },
    mounted() {
        //DOM初始化完成进行地图初始化
        this.initMap()
    },
    methods: {
        initMap() {

            // console.log(data)
            AMapLoader.load({
                key: "cd5cfbe908d53292546b08959deff486", // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ["AMap.DistrictSearch", "AMap.Geolocation", "AMap.Geocoder"] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            })
                .then(AMap => {
                    this.map = new AMap.Map("container", {
                        //设置地图容器id
                        viewMode: "2D", //是否为3D地图模式
                        zoom: 3,
                        //开启卫星地图
                        layers: [
                            // 卫星
                            new AMap.TileLayer.Satellite(),
                            // 路网
                            new AMap.TileLayer.RoadNet()
                        ],
                    });
                    var opts = {
                        subdistrict: 0, //返回下一级行政区
                        extensions: "all", //返回行政区边界坐标组等具体信息
                        level: "district" //查询行政级别为 市
                    };
                    district = new AMap.DistrictSearch(opts); //行政区查询插件
                    geoCorder = new AMap.Geocoder();
                    //进入就显示整个国家范围
                    district.search("中国", function (status, result) {
                        console.log(5555555555);
                        console.log(status, result);
                    });
                    this.markPoints()
                })
                .catch(e => {
                    console.log(e);
                });
        },
        //遍历显示标记点
        markPoints() {
            this.mapData.forEach(item => {
                // 创建一个 Marker 实例：
                const marker = new AMap.Marker({
                    position: new AMap.LngLat(item.longitude, item.latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[lng, lat]
                });
                console.log(marker);
                // 将创建的点标记添加到已有的地图实例：
                this.map.add(marker);

                //给标记点添加事件
                marker.on('click', (e) => {
                    this.setInfoWindows(e, item)
                })
            });
        },
        //显示的弹出框组件
        setInfoWindows(e, item) {
            console.log(item)
            // 信息窗体的内容

            let content = [
                // e.pos[0],e.pos[1],
                `<div style='\'padding:0px' 0px = '' 4px; \'=''><b>${item.name}</b>`,
                `详情 ：${item.content}`,
                "电话 : 010-84107000   邮编 : 100102",
                "地址 : XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div></div>",
                `<img src=${item.img} alt="" style="width: 100px;height: 100px">`
            ];
            // 创建 infoWindow 实例	
            let infoWindow = new AMap.InfoWindow({
                content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
            });
            // 打开信息窗体
            let dd = this.map.getCenter()
            // dd.pos = [e.pos[0], e.pos[1]]
            dd.lat = item.latitude
            dd.lng = item.longitude
            console.log(dd)
            infoWindow.open(this.map, dd);
        },
        //点击获取经纬度
        latitude() {
            this.map.on('click', function (ev) {
                // console.log(ev)
                // 触发事件的对象
                let target = ev.target;
                // 触发事件的地理坐标，AMap.LngLat 类型
                let lnglat = ev.lnglat;
                // 触发事件的像素坐标，AMap.Pixel 类型
                let pixel = ev.pixel;
                // 触发事件类型
                let type = ev.type;
                console.log(target, lnglat, pixel, type)
            });
        },
        // 设置完省市区后，地图跳转到设置好的区域来
        //polygons是绘制边界线的经纬度数组
        setDistrict(adcode) {
            console.log(3333333, adcode);
            for (var i = 0, l = this.polygons.length; i < l; i++) {
                this.polygons[i].setMap(null);
            }
            console.log('------------------', district);
            district.search(adcode, (status, result) => {
                console.log(11111111111);
                console.log(11111111, status);
                console.log(111111122222, result);
                if (status === "complete") {
                    this.getData(result.districtList[0]);
                }
            })
        },

        // 设置数据
        getData(data) {
            let _this = this;
            var bounds = data.boundaries;
            if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                    var polygon = new AMap.Polygon({
                        map: this.map,
                        strokeWeight: 1,
                        strokeColor: "#0091ea",
                        fillColor: "#80d8ff",
                        fillOpacity: 0.2,
                        path: bounds[i]
                    });
                    _this.polygons.push(polygon);
                }
                this.map.setFitView(); //地图自适应
                this.map.setZoom(11);
            }
        }
    },
}
</script>
   
<style lang="less" scoped>
#container {
    width: 811px;
    height: 520px;
}
</style>

父组件调用    安装依赖  element-china-area-data

 <div class="sel-box">
                    <img src="../assets/img/Frame 98@2x(1).png" alt="">
                    <span>区域选择</span>
                    <el-cascader style="width: 100%" :options="options" v-model="selectedOptions"
                        @change="addressChoose"></el-cascader>
                </div>



//js代码
import {
    regionData, // 省市区三级联动数据
    codeToText, // 这是6.1.0版本 5.0.2稳定版是CodeToText 小写的注意！
    pcaTextArr, // 省市区联动数据，纯汉字
    TextToCode,
    provinceAndCityData, // 5.0.2可以使用 TextToCode['北京']
} from "element-china-area-data";



//调用   selectedOptions  数据示例 [广东省，广州市，白云区]
setTimeout(() => {
            this.$refs.maps.setDistrict(this.selectedOptions[2]);
        }, 2000)