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

级联搜索"/>

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

资源下载地址：
资源下载地址：

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代码。

2. 子组件

子组件采用了vue的组件递归调用：

注意：组件在它的模板内可以递归地调用自己。不过，只有当它有 name 选项时才可以这么做。

子组件包含了各个子级级联框的渲染，选择和地图区域绘制。

主要代码：

   watch:{theOpenParentState:function(val,oldval){//监听theOpenParentState（父组件的选择是否改变，如果改变，子组件的子组件状态设为false）this.theOpenChild = !val;}}

三.高德地图Vue引用介绍

你首先需要得到高德地图开发人员的授权,授权说明： [ 高德地图key值获取 ]。

因为我的代码是在webpack环境下打包的，所以我就讲一下在webpack下vue引用高德地图。

1. webpack引入高德
在webpack.base.conf.js中找到module.exports对象。添加externals: { 'AMap': 'AMap' }代码。

2. html引入高德js
在index.html页面加入<script type="text/javascript" src="=1.4.4&key='你的key值'"></script>

3. 在页面中引入高德js
在vue文件中import进来。import AMap from 'AMap'; //在页面中引入高德地图

4. 地图生成
地图初始化生成代码：

new AMap.Map('container', {//地图初始化zoom: 12//地图缩放尺寸（还有很多属性，具体查阅API）});

5. 地图区域渲染
渲染代码：

 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);// 设置地图中心区域}
`www.biyezuopin.vip
这样我们就能简单生成map图像了。

资源下载地址：
资源下载地址：