# vue+高德地图原生制作五级城市级联框（并加入高德地图区域渲染）
最近在学vue,因为需要一个关于城市的级联框，又不想用插件，所以就自己做了一个，效果自己用着还行，大家感兴趣的可以看看。先上图：
用到的技术：
>
> - **vue**
> - **高德地图简单API应用**
> - **原生HTML/JS/CSS**
-------------------
一. 思路分析
-------
想要实现一个上图的效果，实际上我们可以拆分成左边的级联搜索框和右边的高德地图渲染。级联框的数据来源来自高德地图的API,后面我会提到地图数据的引用。
左边的级联框我们可以分成一级为一个组件，一个组件包含该层次所有的区域选择。当我选择一个区域，他会去调用API，获得所选区域子级区域。这里有两种思路：
>1. 一次性加载出所有地图数据
>2. 当点击选择区域时，去访问加载它的对应子级。
第一种情况第一次渲染时间过长，但加载完成后交互性好，用户体验高。第二种思路每次渲染时间相差不大，但是点击时渲染效果用户体验一般。
综合两者优缺点，我选择了第二种思路，防止用户加载数据过长。
二.vue组件实现
---------
**1. 顶层组件**
顶层组件里面主要包含了地图渲染，级联框等最上层组件。先上代码：
```
<template>
<div>
<!-- 下拉选择框 -->
<div @click="changeCascadeState" class="pull-down-input" :title="street">
<span>{{street}}</span>
<Icon :type="theOpenState?'ios-arrow-up':'ios-arrow-down'"></Icon>
</div>
<!-- 级联搜索框 -->
<div class="pull-down-total-div absolute-pull" v-if="theOpenState">
<div ref="childsDiv" class="pull-down-childs-div max-height300 box-shadow">
<div v-for="(item,index) of data" class="pull-down-child" @click="changeCascadeChildState(index)" :title="item.name">
<span>{{item.name}}</span>
<Icon :type="item.districtList.length>0?'ios-arrow-right':''"></Icon>
</div>
</div>
<!-- 子组件级联搜索框 -->
<div v-if="theOpenChild" class="pull-down-childs-div" :style="cascadeChildDivStyle">
<casChild :data="data[chooseIndex].districtList" levels="1"
:streets="streets" :setStreet="setStreet" :map="map"
:polygonMap="polygonMap"></casChild>
</div>
</div>
<!-- 地图显示 -->
<div>
<div id="container"></div>
</div>
</div>
</template>
```
这里是父组件的相关html代码。逻辑代码如下：
```
<script>
import casChild from './cascadeChild.vue'
import AMap from 'AMap'; //在页面中引入高德地图
export default{
name:"aMap",
data:function(){
return {
comName:"中国",//最高一级，默认中国
data:[],//加载子组件所需要的数据数组
street:"街道选择框",//下拉选择框显示值
streets:["中国"],//级联数组
theOpenState:false,//下拉选择框打开状态
theOpenChild:false,//子组件选择框打开状态
cascadeChildDivStyle:{//子组件上顶部平行样式
'margin-top':'10px'
},
chooseIndex:-1,//选择下标
map:{},//高德地图
polygon:{}//高德地图区域渲染
}
},
components:{
'casChild':casChild
},
mounted:function(){
this.loadmap(this.comName); //加载地图和相关组件
},
methods:{
loadmap(name){//初始化加载地图相关组件
this.map = new AMap.Map('container', {//地图初始化
zoom: 12
});
let districtSearch;//查找地图插件
let that = this;
this.data = [];
AMap.service('AMap.DistrictSearch',function(){//回调函数
//实例化DistrictSearch
districtSearch = new AMap.DistrictSearch({
level : 'country',
subdistrict : 1
});
//TODO: 使用districtSearch对象调用行政区查询的功能
districtSearch.setSubdistrict(1);
//TODO: 使用districtSearch对象调用行政区查询的功能
//调用查询方法
districtSearch.search(name,function(status, result){
//TODO : 按照自己需求处理查询结果
that.data = result.districtList?result.districtList:[];
});
});
this.polygon = new AMap.Polygon({ //行政区边界渲染，使用多边形覆盖物实现，初始化this.polygon状态
map: this.map,
strokeWeight: 1,
fillOpacity: 0.7,
fillColor: '#CCF3FF',
strokeColor: '#CC66CC'
});
},
changeCascadeState(){//改变选择下拉框的状态
this.theOpenState = !this.theOpenState;
if(!this.theOpenState){//当关闭选择下拉框的时候，将子组件状态也设为关闭
this.theOpenChild = false;
}
},
changeCascadeChildState(index){//改变子级选择框的组件
this.theOpenChild = !this.theOpenChild;
this.chooseIndex = index;//选择父组件的值
this.cascadeChildDivStyle['margin-top'] = index*40-this.$refs.childsDiv.scrollTop+"px";//定义子组件的高度，因为子组件展开的上顶部要与选择框平行
},
setStreet(){//返回最后选取的街道信息，并将下拉选择框的值改变为“.../.../...”格式
let s = "";
// for(var i in this.streets){//遍历数组，返回以
// if(this.streets[i]){
// s+=this.streets[i];
// if(i<this.streets.length-1&&this.streets[parseInt(i)+1]!=null){
// s+="/";
// }
// }
// }
s = this.streets.filter(function(s){
return s!=null;//过滤null
}).join('/');
this.street = s;
this.changeCascadeState(-1);
},
polygonMap(result){//渲染地图
this.polygon.setMap(null);// 清空地图渲染，方便重新绘制地图
this.polygon = new AMap.Polygon({ // 行政区边界渲染，使用多边形覆盖物实现
map: this.map,
strokeWeight: 1,
fillOpacity: 0.7,
fillColor: '#CCF3FF',
strokeColor: '#CC66CC'
});
this.polygon.setPath(result.boundaries); // 渲染地图通过查询地区所得到的数组
if(result.level==="street"){
this.map.setZoom(14); // 当最后一级为街道，将地图放大到14
}
this.map.setFitView();// 地图自定义
this.map.setCenter(result.center);// 设置地图中心区域
}
}
}
</script>
```
**2. 子组件**
子组件采用了vue的组件递归调用：
>注意：组件在它的模板内可以递归地调用自己。不过，只有当它有 na
