最近在项目中遇到这个需求，现在网站基本稳定上线，抽空来对这块总结下。

先上效果图吧：

页面打开时，用腾讯前端定位组件取当前定位城市：

 

点击城市选择：1级省份——>2级城市——>3级县区

核心实现代码：

1.利用腾讯前端定位组件实现初始定位

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=C93b5178d7a8ebdb830b9b557abce78b"></script>
<script>
var localCity = new BMap.LocalCity();
 localCity.get(function (r) {
 $("#city_text").citySelect({
 prov:'',   //省份
 city:'',   //城市
 dist:r.name   //县区
 });
 });
</script>

2.加载城市json数据

 

三级城市ajax加载原生代码下载地址:http://lihua1108.com/demo/2017-6/city.zip