> ## :-: [地圖-參考手冊-地圖 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> ``` :-: 效果圖 (惠州市地圖)