VUE2.0实现高德地图选择地点后进行行政区边界划分

最终效果图：

最终效果达到选择全部就描绘当前级联选择框下面的所有行政区，第二级开始描绘上一层加当前所有行政区

预备知识：

vue2.0、组件间传值、高德地图API（提前去高德地图提供的服务处申请好key）、elementUI

在父组件中完成一个级联框:

<template><div class="main-Screen"><el-cascadersize="mini"v-model="selectedCity"placeholder="请选择城市":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: "济南市"},{value: "370800",label: "济宁市"},{value: "371300",label: "临沂市",children: [{value: "all",label: "全部"},{value: "371311",label: "罗庄区"}]}]}],selectedCity: ["370000","all"],mapOpt:[], }},methods: {// 得到要绘画出的地图getMapOpt() {if(this.selectedCity){let length = this.selectedCity.length;// 选择了第一级的全部if(length == 1 && this.selectedCity[0] == 'all'){this.mapOpt = [];if(this.cityOption.length == 1){ // 如果第一级的全部下面没有东西了this.mapOpt.push({ city: "中国", color : "blue"});}else{for(let i = 1; i < this.cityOption.length ; i++ ) {this.mapOpt.push({ city: this.cityOption[i].value, color : "blue"});}}}// 选择了第二级的全部if(length == 2 && this.selectedCity[length - 1] == "all"){this.mapOpt = [];// 先把最大的放进去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"});}}}}// 没有选第二级全部的if(length == 2 && this.selectedCity[length - 1] != "all"){this.mapOpt = [];this.mapOpt.push({ city: this.selectedCity[length - 1], color : "green"});}// 选了第三级全部的if(length == 3 && this.selectedCity[length - 1] == "all"){this.mapOpt = [];// 先把最大的一级放进去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"});}}}}}// 选到县级了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");// 执行子组件的搜索方法this.$nextTick( () => {this.$refs.map.getSearch(this.mapOpt);})}},//级联选择框的值改变以后执行changeCity(val) {// this.selectedCity = val;console.log(val);this.getMapOpt();}  }
}

建立一个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: "安全密钥（自己申请）" //填好安全密钥
};
export default {data() {return {map: null, placeSearch: null,//接收Search组件传输input输入框的值searchPlaceInput: "",district: null,polygons: null,map_opt: []};},methods: {// 初始化地图initMap() {AMapLoader.load({key: "你的key", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.DistrictSearch","AMap.ToolBar","AMap.Scale", //比例尺"AMap.HawkEye","AMap.MapType","AMap.Geolocation","AMap.PlaceSearch","AMap.AutoComplete" //搜索框] // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then(AMap => {// 在该容器里新建一个高德地图this.map = new AMap.Map("container", {//设置地图容器idviewMode: "3D", //是否为3D地图模式zoom: 5, //初始化地图级别mapStyle: "amap://styles/darkblue", //地图深色背景样式center: [118.356464, 35.103771] //初始化地图中心点位置这里填经纬度 这里是临沂市的});this.map.addControl(new AMap.Scale());this.map.addControl(new AMap.ToolBar());this.map.addControl(new AMap.HawkEye());// this.map.addControl(new AMap.MapType()); //卫星层、街道、标准地图this.map.addControl(new AMap.Geolocation());// 绑定搜索地图this.placeSearch = new AMap.PlaceSearch({map: this.map}); //调用父组件方法 使默认的地图灯钩绘制出来this.$parent.getMapOpt();}).catch(e => {console.log(e);});},//父组件调用的方法：可以把父组件得到的要查询的点位数组传过来getSearch(e) {console.log(e);this.map_opt = e;// 执行地点搜索this.searchBounds(this.map_opt);},// 行政区区域划分searchBounds(newArr) {// 每次搜索之后清空上一次搜索的数据if (this.polygons != null) {this.map.remove(this.polygons); //清除上次结果this.polygons = [];}//加载行政区划插件if (!this.district) {//实例化DistrictSearchvar opts = {subdistrict: 0, //获取边界不需要返回下级行政区extensions: "all", //返回行政区边界坐标组等具体信息level: "district" //查询行政级别为 市};this.map.plugin(["AMap.DistrictSearch"], () => {this.district = new AMap.DistrictSearch(opts);});}// 循环数组查询for (let i = 0; i < newArr.length; i++) {// 行政区查询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++) {//生成行政区划polygonlet polygon = new AMap.Polygon({map: this.map, // 指定地图对象strokeWeight: 1, // 轮廓线宽度path: bounds[i], //轮廓线的节点坐标数组fillOpacity: 0.4, //透明度fillColor: color, //填充颜色strokeColor: "#256edc" //线条颜色});this.polygons.push(polygon);}// 地图自适应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>

最后自己给一点样式就ok了

VUE2.0实现高德地图选择地点后进行行政区边界划分相关推荐

前端系列——vue2+高德地图web端开发（行政区边界绘制）
vue2+高德地图web端开发(行政区边界绘制) 前言原理基础实现步骤 1.eslint设置AMap为全局变量放置报错 2.Search.vue传输给MapContainer.vue数据然后进行 ...
高德地图-初始化的时候获取行政区边界和中心点
官方API https://editor.csdn.net/md/?not_checkout=1 思路: 1.后台返回城市或着通过IP地址自动定位城市 2.通过城市获取行政区边界和中心点 < ...
vue-amap - 基于Vue2.0和高德地图的地图组件
为什么80%的码农都做不了架构师?>>> Github:ElemeFE/vue-amap 文档: vue-amap 前言在做基于LBS的应用中,时常会和地图打交道,最直接的解 ...
vue2.0 唤起百度地图app_开车选高德，出门靠百度，高德百度地图APP对比
高德和百度是在电子地图领域竞争的对手,但是,在同一领域他们的发展方向的侧重也存在差异.那么,他们究竟有什么不同呢?当然,他们的开发人员必须是不同的,肯定不用考虑.此外,在某些数据和功能上,它们也是不同 ...
Vue2项目使用高德地图
目录一.账号准备 1.注册账号 2.获取key 二.快速上手 1.安装 2.创建地图 3.点标记 4.海量点标记 5.简易行政区图 6. GeoJSON 三.绑定事件总结一.账号准备 1.注册账 ...
Vue 3.0使用高德地图 vue-amap
这篇文章写一下高德地图的简单应用,本人也是刚入坑,在研究阶段注册高德开发者账号,申请KEY完成注册注册完再打开控制台->应用管理->找到"+添加新KEY"-> ...
vue-cli3.0引入高德地图3d效果两种方法+实例+填坑
前言: 因为项目需要引入高德地图的3d效果,找了很多资料,在这里记录下方法和实例组件 ***注意: 因为两个方法代码量都特别大,这里分2个页面详细说一下,方法一是链接出去专门说,最下面有更多资料,高德 ...
Vue2租车高德地图项目经验分享
1:html 块级元素水平居中,只要有宽度,margin:auto: 块级元素垂直居中,可以不设置父容器的高度,设置padding.用子容器的高度撑开,这样子容器就是垂直居中显示子元素块级元素如果不 ...
vue2.0 唤起百度地图app_如何标注百度地图？
随着移动互联网的到来,大家越来越里不开手机了,其中手机中最常用的APP就是地图类APP,而安装的最多的地图app是百度地图app,有了百度地图app,大家以后出门再也不怕迷路,出门之前使用百度地图查一 ...

VUE2.0实现高德地图选择地点后进行行政区边界划分

VUE2.0实现高德地图选择地点后进行行政区边界划分相关推荐

最新文章

热门文章

VUE2.0实现 高德地图 选择地点后 进行 行政区边界划分

VUE2.0实现 高德地图 选择地点后 进行 行政区边界划分相关推荐

最新文章

热门文章

VUE2.0实现高德地图选择地点后进行行政区边界划分

VUE2.0实现高德地图选择地点后进行行政区边界划分相关推荐