> ## :-: [地图-参考手册-地图 JS API | 高德地图API](https://lbs.amap.com/api/javascript-api/reference/map) > ## :-: [vue-amap | 基于 Vue 2.x 与高德的地图组件](https://elemefe.github.io/vue-amap/#/?id=vue-amap-%e5%9f%ba%e4%ba%8e-vue-2x-%e4%b8%8e%e9%ab%98%e5%be%b7%e7%9a%84%e5%9c%b0%e5%9b%be%e7%bb%84%e4%bb%b6) 通过 yarn 安装：`yarn add vue-amap` ## :-: 行政区查询 - AMap.DistrictSearch | 构造函数 | 说明 | | --- | --- | | `AMap.DistrictSearch(opts:`[`DistrictSearchOptions`](https://lbs.amap.com/api/javascript-api/reference/search/#DistrictSearchOptions)`)` | 构造函数，实例化一个行政区查询实例 | | DistrictSearchOptions | 类型 | 说明 | | --- | --- | --- | | `level` | `String` | 关键字对应的行政区级别或商圈，可选值：country：国家province：省/直辖市city：市district：区/县biz\_area：商圈 | | `showbiz` | `Boolean` | 是否显示商圈，默认值true 可选为true/false，为了能够精准的定位到街道，特别是在快递、物流、送餐等场景下，强烈建议将此设置为false | | `extensions` | `String` | 是否返回行政区边界坐标点 默认值：base，不返回行政区边界坐标点 取值：all，返回完整行政区边界坐标点 | | `subdistrict` | `Number` | 显示下级行政区级数（行政区级别包括：国家、省/直辖市、市、区/县4个级别），商圈为区/县下一级      可选值：0、1、2、3 0：不返回下级行政区 1：返回下一级行政区2：返回下两级行政区 3：返回下三级行政区 默认值：1 | ## :-: Demo - 只展示行政区域 :-: vue-amap.js ```js /* * @Description: 配置高德地图 * @Date: 2019-10-18 11:06:20 * @LastEditTime: 2019-10-24 10:28:58 */ import Vue from 'vue'; import VueAMap from 'vue-amap'; import { lazyAMapApiLoaderInstance } from 'vue-amap'; Vue.use(VueAMap); // 初始化实例 VueAMap.initAMapApiLoader({ key: '748a49efaf0eed5860ff34ab96ecd297', // 应用key plugin: ['AMap.DistrictSearch'], // 引入插件 uiVersion: '1.0', // ui库版本，不配置不加载 v: '1.4.15' }); lazyAMapApiLoaderInstance.load().then(() => { // Vue.$map //初始化地图对象，加载地图 const map = new AMap.Map("container", { resizeEnable: true, center: [116.397428, 39.90923], //地图聚焦的位置 zoom: 10 //地图显示的缩放级别 }); const district = new AMap.DistrictSearch({ extensions: 'all', // 返回完整行政区边界坐标点 // 显示下级行政区级数（行政区级别包括：国家、省/直辖市、市、区/县4个级别），商圈为区/县下一级 可选值：0、1、2、3 subdistrict: 1 // 1：返回下一级行政区 }) // 根据关键字查询行政区或商圈信息 关键字支持：行政区名、citycode、adcode、商圈名 // '441300' -- 广东省惠州市 district.search("441300", (status, result) => { if (status !== 'complete') return; const underling = result.districtList[0].districtList; const holes = result.districtList[0].boundaries // 外多边形坐标数组和内多边形坐标数组 const outer = [ new AMap.LngLat(-360, 90, true), new AMap.LngLat(-360, -90, true), new AMap.LngLat(360, -90, true), new AMap.LngLat(360, 90, true), ]; const pathArray = [outer, ...holes]; const polygon = new AMap.Polygon({ strokeColor: '#000', //线颜色 strokeOpacity: 0, //线透明度 // strokeWeight: 5, //线宽 fillColor: '#fff', //填充色 fillOpacity: 0.9 //填充透明度 }); polygon.setPath(pathArray); map.add(polygon); // -------------------------------- const pathArr = []; let len = underling.length; underling.forEach((ele, index) => { district.search(ele.adcode, (status, result) => { if (status !== 'complete') return; const bounds = result.districtList[0].boundaries; pathArr.push(...bounds); const polygon = new AMap.Polygon({ strokeColor: '#0091ea', //线颜色 strokeOpacity: 1, //线透明度 strokeWeight: 5, //线宽 fillColor: '#fff', //填充色 fillOpacity: 0.5, //填充透明度 }); len--; if (!len) { polygon.setPath(pathArr); map.add(polygon); map.setFitView(polygon); //视口自适应 } }); }); }); }); ``` :-: E-map.vue ```html <!-- * @Description: In User Settings Edit * @Date: 2019-10-18 10:27:04 * @LastEditTime: 2019-10-24 09:16:51 --> <template> <div class="amap-wrapper" id="container"> <el-amap id="amapContainer"></el-amap> </div> </template> <style lang="scss" scoped> .amap-wrapper { width: 100vw; height: 100vh; } </style> ``` :-: 效果图 (惠州市地图)