00:00

大体效果就视频中的效果，我介绍下项目

基础项目基于VUE3.0开发，用4.x 脚手架构建的项目，使用Echarts4.9.0 和高德地图2.0版本，本文介绍只是下钻没有上翻，大体差不多，Echarts 下钻不能到街道，高德地图版本可以下钻到街道，下面用两种方式实现下钻效果，

Echarts 实现

我大体分了这么几步做的

1.封装组件

tao-charts 组件

2.注册地图配置options

从高德地图获取地图数据

基本配置项结构

3.调用组件，传递配置项及数据，这儿需要注意的一点是，我是直接点击的地图进行下钻，而api获得地图数据的时候需要城市编码，所以这儿需要逆解析一下。

数据绑定及事件处理

代码量有点多，最后我会介绍源码地址，这地方就不放全部代码了

高德地图实现

高德地图项目中使用我前面文章有介绍过，这次再大体说下，高德地图API推出了2.0版本，使用上简单了许多，具体使用哪种方式看自己需求，我此项目使用cdn引入。

官方文档地址：
https://lbs.amap.com/api/jsapi-v2/guide/abc/load

index.html 中引入cdn

1.webpack 配置外部扩展,vue.config.js 中配置，没有的话新建一个

vue.config.js

2.初始化地图，需要绑定一个div可以根据id也可以根据ref vue项目中我们推荐使用ref,这儿需要注意下，vue3.0 和2.0使用ref有区别

初始化地图

3.创建行政区划浏览

定义，绘制

4.事件处理

事件处理：点击，鼠标滑动

代码实在有点多不方便全部贴出来，我按照写的关键点提取出了基本步骤，完整的代码我也上传到码云和，和上一篇写的vue3 写一个大屏放一起了，想要完整版的可以去下载，vue2.0版本也可以只不过需要修改一点，我前面构建了3.0的项目就在里面写了，这个功能需求一般还挺常见的，如果大家对上面介绍的有疑问或者我有那地方写的不对的欢迎评论区讨论，一起学习一起进步！