vue+高德地图原生制作五级城市级联框（并加入高德地图区域渲染）

柔光的暖阳◎ 2022-05-28 08:57 343阅读 0赞

最近在学vue,因为需要一个关于城市的级联框，又不想用插件，所以就自己做了一个，效果自己用着还行，大家感兴趣的可以看看。先上图：  
![这里写图片描述][70]

用到的技术：

>  *  **vue**
>  *  **高德地图简单API应用**
>  *  **原生HTML/JS/CSS**

--------------------

## 一. 思路分析 ##

想要实现一个上图的效果，实际上我们可以拆分成左边的级联搜索框和右边的高德地图渲染。级联框的数据来源来自高德地图的API。所以你首先需要得到高德地图开发人员的授权：[ \[ 高德地图key值获取 \]][_ _key_]

左边的级联框我们可以分成一级为一个组件，一个组件包含该层次所有的区域选择。当我选择一个区域，他会去调用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 选项时才可以这么做。

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

<template> <div class="pull-down-total-div">  <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="levels!='4'?'ios-arrow-right':''"></Icon> </div> </div>  <div v-if="theOpenChild" class="pull-down-childs-div" :style="cascadeChildDivStyle"> <casChild :data="childData.length>0?childData[0].districtList:[]" :levels="parseInt(levels)+1+''" :streets="streets" :setStreet="setPropsStreet" :map="map" :polygonMap="polygonMap" :theOpenParentState="chooseIndexChangeState" :changeParentChooseIndexState="changeChooseIndexState"></casChild> </div> </div> </template>

下面是逻辑代码部分：

不停的递归调用本身，递归出口在当它没有子级数据或者它的等级为最低等级街道“street”。

*  `if(this.levels==='4')`
 *  `if(!that.childData[0].districtList)`

在做的过程中，我遇到一个问题：当我生成层次达到3个层次以上时，当我选择爷爷级组件不同选择框，我想达成的效果是，父级组件更换数据，子组件关闭。但是在我达到的是，父组件更换数据，子组件未关闭。  
后来找到了原因：因为每个组件都有一个`theOpenChild`控制子组件的状态显示，我爷爷组件最多控制自身的`theOpenChild`值，无法直接控制到父亲级别的组件的`theOpenChild`值（也就是孙子级别组件的显示）。

解决办法：自定义一个`chooseIndexChangeState`的值，负责监听爷爷级选择是否改变，将该值传向子组件设为`theOpenParentState`。并对该值进行监听，如果改变了，就将父亲组件的`theOpenChild`进行改变。

主要代码：

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

## 三.高德地图Vue引用介绍 ##

因为我的代码是在webpack环境下打包的，所以我就讲一下在webpack下vue引用高德地图。  
**1. webpack引入高德**  
在`webpack.base.conf.js`中找到`module.exports`对象。添加`externals: { 'AMap': 'AMap' }`代码。

**2. html引入高德js**  
在index.html页面加入`<script type="text/javascript" src="http://webapi.amap.com/maps?v=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);// 设置地图中心区域
                }

这样我们就能简单生成map图像了。

## 四. 代码路径 ##

代码我已经上传到git上面，有兴趣的可以下下来观看，欢迎一起探讨问题。

> git链接：[https://github.com/preMonster/AmapByVue][https_github.com_preMonster_AmapByVue]

[70]: /images/20220528/a1c0487eb5a744808f4139bbcd5058d3.png
[_ _key_]: http://lbs.amap.com/api/javascript-api/summary
[https_github.com_preMonster_AmapByVue]: https://github.com/preMonster/AmapByVue