在平常项目中，我们会遇到这样的业务场景：
客户希望把自己的门店绘制在百度地图上，通过省、市、区的选择，然后加载不同区域下的店铺位置。
先看看效果图吧：
实现思路：
第一步：整理行政区域表：
要实现通过地区筛选来动态加载地图，首先要有一套中国行政区域表。哪里来呢？如果你做过淘宝API接入，应该会想到淘宝物流接口提供了一个官方的行政区域代码，这个比较靠谱。
第二步：收集行政区域的经纬度：
这个就有点麻烦了，虽然可以在百度坐标拾取系统一个一个的收集整理，但是3000多条记录，是个不小的体力活。于是经过多方面的查找，找到了一份已经由前辈整理过的经纬度表；再结合第一步里的区域，最终得到了一份数据相对齐全的行政区域表。（建表SQL语句见文末下载地址）
第三步：制作地区筛选页面：
地区筛选，三级联动，为了方便演示，以及区域表更新的几率不大，将区域表内容输入成一个json串，保存为area.js文件，大概内容像这样：
var areas = [
{"code":"110000","parentCode":"0","level":"1","name":"北京市","latitude":"39.929986","longitude":"116.395645"},
{"code":"110100","parentCode":"110000","level":"2","name":"市辖区","latitude":"","longitude":""},
{"code":"110101","parentCode":"110100","level":"3","name":"东城区","latitude":"39.938574","longitude":"116.421885"},
...
];
有了数据源，再来做页面就方便多了。
HTML部分：
JS部分（demo.js）：说明都在代码注释里了，应该很容易理解，这里就不重复了。
版权声明：本文为博主原创文章，未经博主允许不得转载。