基于vue的高德地图实现5级城市级联搜索.zip

# 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