vue+Element-ui 的 el-cascader 做高德地图的省市区三级联动并且是异步加载，点击省市区跳转到对应的区（地图可以通过后端返回的点进行标点）

// 完整版高德地图，可以复制代码直接使用

index.html

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key= 这里的key 自行去高德地图申请 &plugin=AMap.DistrictSearch"></script>

template

<el-cascader size="large"

                        :options="init_list"

                        v-model="selectedOptions"

                        :props="props"

                        @visible-change="show_init"

                        @change="change"

                        change-on-select // 可以跳转二级 ---》 市区的视野

                        placeholder="请选择省/市/区" >

                    </el-cascader>

 

<!-- 高德地图 -->

            <div id="amap-main">

            </div>

 

script 部分

var map, district,polygons = [],

citycode;

import request from '../../api/request'

let node=[]

 

data 

selectedOptions:[],

init_list:[

                {value:1,

                    label:1,

                    level:1

                }

            ],

props : {

                lazy: true,

                lazyLoad (node, resolve) {

                    if(node.data.level){

                        if(node.data.level==="district"){

                            // console.log(node.pathLabels)

                            this.selectedOptions = node.pathLabels

                            map.setZoomAndCenter(13,[node.data.center.lng,node.data.center.lat]);

                            return resolve();

                        }

                    }

                    setTimeout(() => {

                        let nodes=[]

                        district.search(node.value, function(status, result) {

                            if(status === 'complete'){

                                 // console.log(result.districtList[0].level)

                                nodes=result.districtList[0].districtList.map(item=>{

                                    return{

                                        value:item.adcode,

                                        label:item.name,

                                        ...item,

                                        level:result.districtList[0].level,

                                        leaf:result.districtList[0].level==='city'

                                    }

                                })

                                // console.log(nodes)

                                // 通过调用resolve将子节点数据返回，通知组件数据加载完成

                                resolve(nodes);

                            }

                        })

                    },100);

                },

            },

 

created() {

 

        // 获取地图

        this.requestMap()

 

    },

 

methods:

// 根据经纬度向后端请求数据

        requestMap(){

            let that =this

            let url =` 后端接口 ?zoom=14&lat=22.52500873&lng=113.93763613`

            request.get(url).then((res)=>{

                that.updateMap(res)

            })

        },

updateMap(res){

            let that=this

            let array =res.data;

            map = new AMap.Map('amap-main',

                {resizeEnable: true,zoom:14,

                center: new AMap.LngLat(113.95379912288666, 22.535850238935417)

            })

            that.show_init()

            var markers;

            creatMaker(array)

            function creatMaker(array){

                markers = [];

                for(let item of array){

                    var marker = new AMap.Marker({

                        position: new AMap.LngLat(item.longitude,item.latitude),

                        // offset: new AMap.Pixel(-10, -10),

                        // icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL

                    });

                    markers.push(marker)

                }

                map.add(markers);

            }

            map.on('moveend', mapMoveend);

            function mapMoveend (){

                var zoom = map.getZoom(); //获取当前地图级别

                var center = map.getCenter(); //获取当前地图级别

                // console.info(zoom,center);

                map.remove(markers);

                let url

                if(zoom<11||zoom>16){

                    url =` 后端接口api ?lat=${center.lat}&lng=${center.lng}`;

                }else{

                    url =` 后端接口api ?zoom=${zoom}&lat=${center.lat}&lng=${center.lng}`;

                }

                request.get(url).then((res)=>{

                    // console.info(res)

                    creatMaker(res.data)

                })

            }

        },

change(){

            let that=this

            district.search(that.selectedOptions.slice(-1)[0], function(status, result) {

                if(status === 'complete'){

                    // console.log(result)

                    let res=result.districtList[0];

                    if(res.level==='province'){

                        map.setZoomAndCenter(7,[res.center.lng,res.center.lat]);

                    }

                    if(res.level==='city'){

                        map.setZoomAndCenter(11,[res.center.lng,res.center.lat]);

                    }

                    if(res.level==='district'){

　　　　　　　

　　　　　　// console.info("获取到当前区的中心点的经纬度：  ",res.center.lng,res.center.lat)

                        // console.info(res.name) // 获取到当前选中的区

                        // console.info(res.adcode)  // 获取到当前区域的 adcode

                        map.setZoomAndCenter(13,[res.center.lng,res.center.lat]);

                    

　　　　　　<!-- 支持地图逆解，可以用adCode（城市的编码，还可以用 经纬度 ） --!>　　

　　　　　　// AMap.plugin('AMap.Geocoder', function() {

                    //     var geocoder = new AMap.Geocoder({

                    //         // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode

                    //         city: '010'

                    //     })

                        

                    //     var lnglat = [116.396574, 39.992706]

                    //     geocoder.getAddress(lnglat, function(status, result) {

                    //         if (status === 'complete' && result.info === 'OK') {

                    //             // result为对应的地理位置详细信息

                    //         }

                    //     })

                    // })

 

 

　　　　　　}

                }

            })

        },

        // 出现下拉框时 触发请求

        show_init(status){

            if(status){

                //行政区划查询

                let that=this

                var opts = {

                    subdistrict: 1,   //返回下一级行政区

                    showbiz:false  //最后一级返回街道信息

                };

                

                district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用

                district.search('中国', function(status, result) {

                    if(status=='complete'){

                        // console.log(result.districtList[0])  中国地图的所有区域

                        that.init_list=result.districtList[0].districtList.map(item=>{

                            return {

                                value: item.adcode,

                                label: item.name,

                                ...item,

                                level:''

                            }

                        })

                    }

                });

            }

        },