最終效果圖：

?

?

?

?

?

最終效果達(dá)到選擇全部就描繪當(dāng)前級(jí)聯(lián)選擇框下面的所有行政區(qū)，第二級(jí)開始描繪上一層加當(dāng)前所有行政區(qū)

預(yù)備知識(shí)：

vue2.0、組件間傳值、高德地圖API（提前去高德地圖提供的服務(wù)處申請(qǐng)好key）、elementUI

在父組件中完成一個(gè)級(jí)聯(lián)框:

<template><div class="main-Screen"><el-cascadersize="mini"v-model="selectedCity"placeholder="請(qǐng)選擇城市":options="cityOption"@change="changeCity(selectedCity)"></el-cascader></div><Map></Map> </template> import Map from "./component/Map.vue";export default {name: "MainScreen",components: {Map},data() {return {cityOption: [{value: "all",label: "全部"},{value: "370000",label: "山東省",children: [{value: "all",label: "全部"},{value: "370100",label: "濟(jì)南市"},{value: "370800",label: "濟(jì)寧市"},{value: "371300",label: "臨沂市",children: [{value: "all",label: "全部"},{value: "371311",label: "羅莊區(qū)"}]}]}],selectedCity: ["370000","all"],mapOpt:[], }},methods: {// 得到要繪畫出的地圖getMapOpt() {if(this.selectedCity){let length = this.selectedCity.length;// 選擇了第一級(jí)的全部if(length == 1 && this.selectedCity[0] == 'all'){this.mapOpt = [];if(this.cityOption.length == 1){ // 如果第一級(jí)的全部下面沒(méi)有東西了this.mapOpt.push({ city: "中國(guó)", color : "blue"});}else{for(let i = 1; i < this.cityOption.length ; i++ ) {this.mapOpt.push({ city: this.cityOption[i].value, color : "blue"});}}}// 選擇了第二級(jí)的全部if(length == 2 && this.selectedCity[length - 1] == "all"){this.mapOpt = [];// 先把最大的放進(jìn)去this.mapOpt.push({ city: this.selectedCity[length - 2], color : "#13c2c2"});// 再去找childrenfor(let i = 1; i < this.cityOption.length ; i++ ) {if(this.selectedCity[length - 2] == this.cityOption[i].value){for (let j = 1; j < this.cityOption[i].children.length; j++) {this.mapOpt.push({ city: this.cityOption[i].children[j].value, color : "blue"});}}}}// 沒(méi)有選第二級(jí)全部的if(length == 2 && this.selectedCity[length - 1] != "all"){this.mapOpt = [];this.mapOpt.push({ city: this.selectedCity[length - 1], color : "green"});}// 選了第三級(jí)全部的if(length == 3 && this.selectedCity[length - 1] == "all"){this.mapOpt = [];// 先把最大的一級(jí)放進(jìn)去this.mapOpt.push({ city: this.selectedCity[length - 2], color : "green"});// 再去找childrenfor(let i = 1; i < this.cityOption.length ; i++ ) {if(this.selectedCity[length - 3] == this.cityOption[i].value){for (let j = 1; j < this.cityOption[i].children.length; j++) {if(this.selectedCity[length - 2] == this.cityOption[i].children[j].value ){for(let k = 1; k < this.cityOption[i].children[j].children.length; k++)this.mapOpt.push({ city: this.cityOption[i].children[j].children[k].value, color : "yellow"});}}}}}// 選到縣級(jí)了if(length == 3 && this.selectedCity[length - 1] != "all"){this.mapOpt = [];this.mapOpt.push({ city: this.selectedCity[length - 1], color : "yellow"});}// console.log(this.mapOpt,"mapOpt");// 執(zhí)行子組件的搜索方法this.$nextTick( () => {this.$refs.map.getSearch(this.mapOpt);})}},//級(jí)聯(lián)選擇框的值改變以后執(zhí)行changeCity(val) {// this.selectedCity = val;console.log(val);this.getMapOpt();} } }

建立一個(gè)Map.vue(子組件)

<template><div class="content"><div class="map"><div class="img" id="container"> //建立好容器</div></div></div> </template><script> import AMapLoader from "@amap/amap-jsapi-loader"; //下載高德地圖的包 window._AMapSecurityConfig = {securityJsCode: "安全密鑰（自己申請(qǐng)）" //填好安全密鑰 }; export default {data() {return {map: null, placeSearch: null,//接收Search組件傳輸input輸入框的值searchPlaceInput: "",district: null,polygons: null,map_opt: []};},methods: {// 初始化地圖initMap() {AMapLoader.load({key: "你的key", // 申請(qǐng)好的Web端開發(fā)者Key，首次調(diào)用 load 時(shí)必填version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15plugins: ["AMap.DistrictSearch","AMap.ToolBar","AMap.Scale", //比例尺"AMap.HawkEye","AMap.MapType","AMap.Geolocation","AMap.PlaceSearch","AMap.AutoComplete" //搜索框] // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then(AMap => {// 在該容器里新建一個(gè)高德地圖this.map = new AMap.Map("container", {//設(shè)置地圖容器idviewMode: "3D", //是否為3D地圖模式zoom: 5, //初始化地圖級(jí)別mapStyle: "amap://styles/darkblue", //地圖深色背景樣式center: [118.356464, 35.103771] //初始化地圖中心點(diǎn)位置這里填經(jīng)緯度 這里是臨沂市的});this.map.addControl(new AMap.Scale());this.map.addControl(new AMap.ToolBar());this.map.addControl(new AMap.HawkEye());// this.map.addControl(new AMap.MapType()); //衛(wèi)星層、街道、標(biāo)準(zhǔn)地圖this.map.addControl(new AMap.Geolocation());// 綁定搜索地圖this.placeSearch = new AMap.PlaceSearch({map: this.map}); //調(diào)用父組件方法 使默認(rèn)的地圖燈鉤繪制出來(lái)this.$parent.getMapOpt();}).catch(e => {console.log(e);});},//父組件調(diào)用的方法：可以把父組件得到的要查詢的點(diǎn)位數(shù)組傳過(guò)來(lái)getSearch(e) {console.log(e);this.map_opt = e;// 執(zhí)行地點(diǎn)搜索this.searchBounds(this.map_opt);},// 行政區(qū)區(qū)域劃分searchBounds(newArr) {// 每次搜索之后清空上一次搜索的數(shù)據(jù)if (this.polygons != null) {this.map.remove(this.polygons); //清除上次結(jié)果this.polygons = [];}//加載行政區(qū)劃插件if (!this.district) {//實(shí)例化DistrictSearchvar opts = {subdistrict: 0, //獲取邊界不需要返回下級(jí)行政區(qū)extensions: "all", //返回行政區(qū)邊界坐標(biāo)組等具體信息level: "district" //查詢行政級(jí)別為 市};this.map.plugin(["AMap.DistrictSearch"], () => {this.district = new AMap.DistrictSearch(opts);});}// 循環(huán)數(shù)組查詢for (let i = 0; i < newArr.length; i++) {// 行政區(qū)查詢this.district.search(newArr[i].city, (status, result) => {console.log(status, result, "*****");this.handlePolygon(result, newArr[i].color);});}},// 畫圖方法handlePolygon(result, color) {let bounds = result.districtList[0].boundaries;if (bounds) {for (let i = 0, l = bounds.length; i < l; i++) {//生成行政區(qū)劃polygonlet polygon = new AMap.Polygon({map: this.map, // 指定地圖對(duì)象strokeWeight: 1, // 輪廓線寬度path: bounds[i], //輪廓線的節(jié)點(diǎn)坐標(biāo)數(shù)組fillOpacity: 0.4, //透明度f(wàn)illColor: color, //填充顏色strokeColor: "#256edc" //線條顏色});this.polygons.push(polygon);}// 地圖自適應(yīng)this.map.setFitView();}},},mounted() {this.initMap();} }; </script><style scoped> .content {width: 100%;height: 100%; } .map {width: 100%;height: 100%;display: flex;flex-direction: row;justify-content: flex-start; } </style>

最后自己給一點(diǎn)樣式就ok了?

總結(jié)

以上是生活随笔為你收集整理的VUE2.0实现 高德地图 选择地点后 进行 行政区边界划分的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。