移动端三级城市ajax加载选择+实时定位

发布于2017年6月30日 11:06:27

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

先上效果图吧:

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

 

点击城市选择: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

 

发表评论