工欲善其事必先利其器，这里我们绘制行政区划图的底层工具选用Echarts与百度地图javascript API。直接进入正题：
一、对比选取“地理坐标/地图”中合适的API示例
先进入Echarts官网（），查看全部示例。因为目标是行政区划地图，所以目前可以选择的就是“香港18区人口密度 （2011）”图（后称HK图）与“USA Population Estimates (2012)”图（后称USA图）。
对比代码细节后发现，主体功能没有什么区别。存在一些细节的差异，比如USA图显示地区名称，HK图不显示；USA图中像夏威夷等较远距离的地区，通过registerMap方法中配置平移参数时，拉近显示等。
那么选定本次用HK图作为示例代码，来绘制需要的行政区划图。
二、在程序中引用，生成初始化示例
这里引用示例时，使用的开发语言是HTML5，HTML代码如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>测试地图代码</title> </head> <body> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> <!-- 引用jQuery与Echarts --> <script src="jquery.min.js"></script> <script src="echarts.min.js"></script> <script type="text/javascript"> var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; myChart.showLoading(); $.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson) { myChart.hideLoading(); echarts.registerMap('HK', geoJson); myChart.setOption(option = { title: { text: '香港18区人口密度 （2011）', subtext: '人口密度数据来自Wikipedia', sublink: '%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12' }, tooltip: { trigger: 'item', formatter: '{b}<br/>{c} (p / km2)' }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, visualMap: { min: 800, max: 50000, text: ['High', 'Low'], realtime: false, calculable: true, inRange: { color: ['lightskyblue', 'yellow', 'orangered'] } }, series: [ { name: '香港18区人口密度', type: 'map', mapType: 'HK', // 自定义扩展图表类型 label: { show: true }, data: [ {name: '中西区', value: 20057.34}, {name: '湾仔', value: 15477.48}, {name: '东区', value: 31686.1}, {name: '南区', value: 6992.6}, {name: '油尖旺', value: 44045.49}, {name: '深水埗', value: 40689.64}, {name: '九龙城', value: 37659.78}, {name: '黄大仙', value: 45180.97}, {name: '观塘', value: 55204.26}, {name: '葵青', value: 21900.9}, {name: '荃湾', value: 4918.26}, {name: '屯门', value: 5881.84}, {name: '元朗', value: 4178.01}, {name: '北区', value: 2227.92}, {name: '大埔', value: 2180.98}, {name: '沙田', value: 9172.94}, {name: '西贡', value: 3368}, {name: '离岛', value: 806.98} ], // 自定义名称映射 nameMap: { 'Central and Western': '中西区', 'Eastern': '东区', 'Islands': '离岛', 'Kowloon City': '九龙城', 'Kwai Tsing': '葵青', 'Kwun Tong': '观塘', 'North': '北区', 'Sai Kung': '西贡', 'Sha Tin': '沙田', 'Sham Shui Po': '深水埗', 'Southern': '南区', 'Tai Po': '大埔', 'Tsuen Wan': '荃湾', 'Tuen Mun': '屯门', 'Wan Chai': '湾仔', 'Wong Tai Sin': '黄大仙', 'Yau Tsim Mong': '油尖旺', 'Yuen Long': '元朗' } } ] }); }); option && myChart.setOption(option); </script> </body> </html>完成后直接在浏览器上打开这个html，效果如下：
三、获取目标地区的边界坐标，组整成需要的json文件
首先查看HK图中引用的边界数据的json文件，查看代码可知json地址为
访问后显示如下：
可见，省级行政区划的JSON，是由省内各个地市的边界坐标数据和组成的。那么，如何获取目标地区的json数据呢？
百度地图与高德地图开放平台中都给出了画出行政区划的代码，只需要console.log打印出绘制的数组就可以获得地区边界坐标集。得到坐标集后，整理格式即可。
但是！有同事推荐给我了一个网站，他们把数据已经整理好了！直接列出：。进入后就是以下界面：
(二维码自动识别)
下载好后，发现存在一个问题：新设立的一些地市没有独立出来。那么，就在原有地市中找到该区县，直接剪切后，原有地区就不再显示该区县。把剪切后的按照市级格式重组成一个JSON文件即可。
生成后的数据，替换示例代码中的HK的边界坐标JSON，效果如图：
四、调整参数配置，优化地图显示
首先进入“文档”中“配置项手册”，查看需要配置的参数：
--标题（title）
--缩放与放大（roam）
--值的视觉映射（visualMap）
--提示框（tooltip）
--工具箱（toolbox）
--居中自调整大小
.map{ width: 100vw; height: 100vh; margin: 0 auto; }五、实现区划图点击查询，点击进入下级区划图，返回上级功能
效果如下图：
主要使用以下监听事件获取地图上点击的地区：
myChart.on('click', function (params) { console.log(params); });六、实现地图低层区划切换至百度地图的功能
首先进入百度地图开放平台查看文档，com/。查看开发文档中的javascript API，百度地图基础调用demo如下（首先需要获得你的密钥）：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>测试地图代码</title> </head> <body> <div id="container" style="width: 500px; height: 500px;"></div> <!-- 引用jQuery与百度地区接口 --> <script src="jquery.min.js"></script> <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的秘钥"></script> <script type="text/javascript"> var map = new BMapGL.Map('container'); // 创建Map实例 map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 </script> </body> </html>完成后直接在浏览器上打开这个html，效果如下：
之后，增加如下功能：
海量聚合点
默认中心定位（文字/坐标）
基础缩放、拉动等功能
七、模块改进方向记录
1.行政区划图下增加实体地图，效果会更好，如下图：
2.行政区划图增加淡入淡出的切换效果会比较好
