省市区三级联动(带经纬度、离线地图)

因为最近在做一个百度离线地图功能,里面就涉及到一个需求:根据省市区三级联动定位地图中心

然后在网上找了挺久的,主要是省市区经纬度的json文件,csdn上好多要积分的:省市区经纬度json文件 这是我 上传的,但是你看到这篇博客你就不需要去下了,后面有项目地址,自行去github上下载就行,不过你也可以象征性的下载然后支持我一下

代码思路:
html


<div class="container">
  <div class="row">
    <select class="province" name="province">
    select>
    <select class="city" name="city">
    select>
    <select class="district" name="district">
    select>
    <button onclick="getLocation()">获取经纬度button>
    <input type="text" id="location">
  div>
div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js">script>
<script src="js/jsAddress.js">script>

javascript

/默认选择 
  addressInit('province', 'city', 'district', '广东', '深圳市', '宝安区');

  //获取经纬度json
  function getJson() {
    var cityJson;
    $.ajax({
      url: './json/city.json',
      async: false,
      success: function (res) {
        cityJson = res;
      }
    });
    return cityJson;
  }
  var cityJson = getJson();
  console.log(cityJson);

  //按钮点击事件
  function getLocation() {
     var city = [];
    city.push($('.province').val());
    city.push($('.city').val());
    city.push($('.district').val());
    console.log(city)
    var p = cityJson.p;
    var d = cityJson.d;
    var c = cityJson.c;
    // console.log(p,c,d)
    for (var pKey in p) {
        if (p[pKey] == city[0]) {//取得对应的省
            var ct = c[pKey]
            for (var cKey in ct) {
                if (ct[cKey] == city[1]) {//取得对应的市
                    var dt = d[cKey];
                    for (var dKey in dt) {
                        if (dt[dKey].name == city[2]) {//取得对应的区 并且获取经纬度
                            // console.log(dKey);
                            $('#location').val(dt[dKey].lon+','+dt[dKey].lat)
                            break;
                        }
                    }
                    break;
                }
            }
            break;
        }
    }
  }

效果图:
省市区三级联动(带经纬度、离线地图)_第1张图片

多说一句:如果获取经纬度不成功请自己查看jsAddress.jscity.json文件中对应的省市区名称

代码:cityLocation

你可能感兴趣的:(大前端-插件API)