使用echart散点图绘制地图

之前没看过echart的地图，最近有个需求需要绘制到深圳地图，经过几番测试，实现需要的效果，这里写篇博客记录一下，先看效果图:

但如果不是node环境呢，比如本地的一个html文件，第一想到的是ajax，但这是本地模拟一下，使用ajax还是有点麻烦，这里超人鸭用一种不太规范的方法引入，这是json文件原本的样子:

我使用一个变量定义这个对象:

然后在html文件中用script标签引入:

这里已经引入成功了，我们可以打印测试一下:

是没问题的，现在拿到深圳地图的json数据，接下来就是绘制地图了，还是echart那一套:

先看看效果:

接下来就是往上面绘制散点图，既然是往以这个地图作为坐标系，那显示在上面点的位置就要在这个地图上，我们需要先写好每个地点的经纬度：

大家百度一下经纬度查询就能找到，然后是散点图的配置，还有一个处理数据的函数:

上面的处理函数也是从官网改造一点细节复制过来的，处理后的每一项data就是这个样子:

散点图会根据value的前两项去匹配坐标，在地图上显示，后面的数据并无关系。到这里的效果:

看到我使用了回调函数格式化了提示框显示的内容，这个回调函数带了一个params参数，这个对象里面基本什么信息都有，大家不知道的话打印一下什么都明了。

到这里就实现使用echart散点图绘制地图，超人鸭这篇文章所实现的适合那种某个区域的某种东西的分布情况，用处还是挺大的，欢迎大家指教哦。

深圳行政区域划分信息及区划图如下：

深圳市共设6个市辖行政区。其中，深圳经济特区内4个区，即福田区、罗湖区、南山区、盐田区；特区外2个区，即宝安区、龙岗区。

福田区、 罗湖区、 南山区 、盐田区、 宝安区、 龙华区、 光明区 、龙岗区、 坪山区 、大鹏区。

【福田区】行政区域东起红岭路与罗湖区相连，西至侨城东路与南山区相接，南临深圳河、深圳湾与香港新界相望，北与宝安区接壤。

【罗湖区】行政区域东接盐田区，西至红岭路与福田区相连，南临深圳河与香港毗邻，北与龙岗区、宝安区接壤。

【南山区】行政区域东至侨城东路与福田区相连，西扼珠江口与珠海市相邻，南至深圳湾和内伶仃岛与香港隔海相望，北背羊台山与宝安区接壤。

【盐田区】行政区域东起大鹏湾背仔角与龙岗区相连，西接罗湖区，南连香港新界，北靠龙岗区。

【宝安区】行政区域东接龙岗区，西临伶仃洋与中山市相望，南连南山区、福田区和罗湖区，北靠东莞市。

【龙岗区】行政区域东南临大亚湾与惠州市相邻，西接宝安区，南连罗湖区、盐田区，隔大鹏湾与香港相望，东北靠惠州市、东莞市。

扩展资料

深圳，简称“深”，别称“鹏城”，是中国四大一线城市之一，广东省省辖市、计划单列市、副省级市、国家区域中心城市、超大城市，国务院定位的全国经济中心城市和国际化城市、国家创新型城市、国际科技产业创新中心、全球海洋中心城市、国际性综合交通枢纽，中国三大全国性金融中心之一。

深圳地处广东南部，珠江口东岸，与香港一水之隔，东临大亚湾和大鹏湾，西濒珠江口和伶仃洋，南隔深圳河与香港相连，北部与东莞、惠州接壤。全市下辖9个行政区和1个新区，总面积1997.47平方公里。截至2017年末，深圳常住人口1252.83万人，其中户籍人口434.72万人，实际管理人口超过2000万，城市化率100%。

深圳是中国设立的第一个经济特区，是中国改革开放的窗口和新兴移民城市，已发展成为有一定影响力的现代化国际化大都市，创造了举世瞩目的“深圳速度”，享有“设计之都”、“时尚之城”、“创客之城”、“志愿者之城”等美誉。

深圳地处珠江三角洲前沿，是连接香港和中国内地的纽带和桥梁，在中国高新技术产业、金融服务、外贸出口、海洋运输、创意文化等多方面占有重要地位，在中国的制度创新、扩大开放等方面

肩负着试验和示范的重要使命。深圳水陆空铁口岸俱全，是中国拥有口岸数量最多、出入境人员最多、车流量最大的口岸城市。

参考资料来源：百度百科-深圳市行政区划

---