Vue 进阶(幺玖幺):ECharts 实现地图功能
![Vue进阶(幺玖幺):ECharts 实现地图功能](https://static001.geekbang.org/infoq/cf/cf0f1de4b55dbe5b850b8572beeaf1c7.gif)
一、前言
无论Web
端还是移动端均会存在应用地图展示数据信息的应用场景。应用场景如下:
全国地图
![](https://static001.geekbang.org/infoq/68/68d8da7477d4aa966de160581a4e63f8.png)
ToolTip
![](https://static001.geekbang.org/infoq/e6/e6410d677a96805f85c62697bfb149af.png)
市级地图
![](https://static001.geekbang.org/infoq/ce/ce3333f830faf22763cfc9f4b9dc1a17.png)
县级地图
![](https://static001.geekbang.org/infoq/18/1889a3c8b8722efccba52340b6f76ff1.png)
二、实现步骤
2.1 Map 初始化
复制代码
有关各配参的详细说明,可参考ECharts官网。
2.2 定义省份及市区数组
在定义省市区时,应注意区域规划的正确性。
2.3 点击事件处理
在实现地图下钻过程中,点击相应省份、市区时,可下钻至下一层级。
复制代码
2.4 下钻渲染
地图下钻过程中,需渲染下一层级地图。
复制代码
在部署至服务器时,应注意.json
文件目录获取的正确性,否则会造成下钻失败。
三、拓展阅读
四、延伸阅读
js
获取url
参数有两种情况:
4.1 应用场景一:内部页面之间互相传值
假如要从 A 页面跳转到 B 页面,
复制代码
进入 B 页面之后,
复制代码
就能将 A 页面的 id 传入 B 页面,进行参数获取。
4.2 应用场景二:外系统跳转 Vue 项目时自带参数
例如: https://shq5785.blog.csdn.net/list?Id=sunhuaqiang1#/
外系统跳转进入的url
会在Vue
项目编译后自动添加 “#/
”后缀 ,其中带的参数在 “#/
”之前,所以应用场景一中的方法无法获取,只能应用JS
的方法来获取,解析功能函数如下所示:
复制代码
调用方式如下:
复制代码
4.3 拓展阅读
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/435688eaf46b4eca9e41107f9】。文章转载请联系作者。
评论