因为最近在做一个百度离线地图功能,里面就涉及到一个需求:根据省市区三级联动定位地图中心
然后在网上找了挺久的,主要是省市区经纬度的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;
}
}
}
效果图:
多说一句:如果获取经纬度不成功请自己查看jsAddress.js
和city.json
文件中对应的省市区名称
代码:cityLocation