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

- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request