高德地图下钻功能

一、首先分析思路

 

1.下载中华人民共和国高德地图数据包  

这一步是为了得到初始数据，但是直接调用下图接口就可以，参数传100000

（不断进步的过程，欢迎大家批评指正！）

2.页面加载完成在地图对省级（找到对应中心点）进行打点标注

3.为标注添加点击事件，传参为当前点击省的adcode,调用高德地图行政区域查询API服务

 详见官方文档：https://lbs.amap.com/api/webservice/guide/api/district

4.市区级依次类推

二、代码实现

1.引入数据包

import zhongguo from '@/utils/amap/zhongguo.json'

 2.引入axios

(我是之前安装了，如果之前没有安装，请执行npm install axios)

import axios from 'axios'

3.接口调用及方法实现

export default {
    name:"ditu",
    data(){
        return{
            amap:null,
        }
    },
    methods: {
        getAMap(){
            var map, district, polygons = [], citycode;
            map = new AMap.Map('map_index', {
                resizeEnable: true,
                center: [116.30946, 39.937629],
                zoom: 4
            });
            this.amap = map
        },
        markerProvince(){//标注省
            zhongguo.features.forEach(ele=>{
                let map = this.amap
                 // 创建纯文本标记
                var text = new AMap.Text({
                    text:ele.properties.name + "--10",
                    anchor:'center', // 设置文本标记锚点
                    // draggable:true,
                    cursor:'pointer',
                    angle:2,
                    style:{
                        'padding': '.5rem 1.25rem',
                        'margin-bottom': '1rem',
                        'border-radius': '.25rem',
                        'background-color': 'rgb(0, 51, 51,0.6)',
                        'width': '8rem',
                        'height': '2rem',
                        'border-width': 0,
                        'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                        'text-align': 'center',
                        'font-size': '10px',
                        'color': '#fff'
                    },
                    position: ele.properties.center
                });
                text.setMap(map);
                let that = this
                text.on('click', function () {
                    that.searchNext(ele,map);
                })
            })
        },
        searchNext(ele,map){
            axios.get("https://restapi.amap.com/v3/config/district?keywords="+ele.properties.adcode+"&subdistrict=2&key='yourkey'",{
            }).then(res=>{
                this.markerNext(ele,res.data.districts[0].districts,map);
            }).catch({

            });
        },
        markerNext(centerp,nextData,premap){
            //清除之前的
            premap.clearMap();  // 清除地图覆盖物
            //标记新的，并以点击的点为中心
            // premap.setCenter(centerp.properties.center); //设置地图中心点
            premap.setZoomAndCenter(8, centerp.properties.center); //同时设置地图层级与中心点
            nextData.forEach(ele=>{
                var text = new AMap.Text({
                    text:ele.name + "--10",
                    anchor:'center',
                    cursor:'pointer',
                    angle:2,
                    style:{
                        'padding': '.5rem 1.25rem',
                        'margin-bottom': '1rem',
                        'border-radius': '.25rem',
                        'background-color': 'rgb(0, 51, 51,0.6)',
                        'width': '8rem',
                        'height': '2rem',
                        'border-width': 0,
                        'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                        'text-align': 'center',
                        'font-size': '10px',
                        'color': '#fff'
                    },
                    position: [Number(ele.center.split(',')[0]),Number(ele.center.split(',')[1])]
                });
                text.setMap(premap);
                let that = this
                text.on('click', function () {
                    that.searchNext(ele,premap);
                })
            })
        }
    },
    mounted(){
        this.getAMap();
        this.markerProvince();
    }
}

实现效果：

查看官方文档很重要哦