百度批量地址逆解析

最新推荐文章于 2021-05-16 22:38:52 发布

简单，不简单

最新推荐文章于 2021-05-16 22:38:52 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： javascript baidu 百度 promise

本文链接：https://blog.csdn.net/s767856178/article/details/72457709

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

由于PM想要批量添加地址，地址都是文本性的，需要将文本内容转换成百度详细的地址，但是baidu不提供批量查询接口

流程：

1. 根据地址查经纬度

2. 根据经纬度反查地址详细信息（包含省份，城市，区域等信息）

难点在于：

1. 批量跨域请求，无状态，请求返回的结果和参数对应关系管理

2. 批量二次请求

3. 使用Promise

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>【baidu Api】批量地址逆解析</title>
</head>

<body>
<ul>
<li class="item">八维研究学院</li>
<li class="item">上地华联商厦</li>
<li class="item">中国农业大学</li>
<li class="item">清华大学</li>
<li class="item">百旺商城</li>
<li class="item">上地办公中心</li>
<li class="item">百度大厦</li>
<li class="item">西二旗地铁站</li>
<li class="item">沙河地铁站</li>
</ul>
<input type="hidden" name="addressListData" value="">
</body>
<script>
(function(){
var addrList = [];
$('.item').each(function(i ,dom) {
if ($(this).text() != '') {
var obj = {
input_address : $(this).text(),
lat : '',
lng : '',
latlng : '',
district_name : '',
city_name : '',
street :'',
status : 0
}
addrList.push(obj);
}
});

var getLatLng = function(text, city, callback) {
var url = 'http://api.map.baidu.com/geocoder/v2/?output=json&address=' +text + '&city='+city+'&ak=yourBaiduAk';
$.ajax({
async:false,
url: url,
type: "GET",
dataType: 'jsonp',
timeout: 5000,
success: function (json) {
callback && callback(json)
}
});
}
var latlng2Addr = function(i, callback) {
if (addrList[i].status != 0 ) {
return;
}
var url = 'http://api.map.baidu.com/geocoder/v2/?location='+addrList[i].lat+','+addrList[i].lng+'&output=json&pois=1&ak=yourBaiduAk';
$.ajax({
async:false,
url: url,
type: "GET",
dataType: 'jsonp',
timeout: 5000,
success: function (json) {
if (json.status == 0) {
addrList[i].city_name = json.result.addressComponent.city;
addrList[i].district_name = json.result.addressComponent.district;
addrList[i].street = json.result.addressComponent.street;
}
}
});
}
var parseAddrList = function(i) {
return new Promise(function(resolve, reject){
getLatLng(addrList[i].input_address, '北京', function(data){
console
if ( data.status == 0 ) {
addrList[i].lat = data.result.location.lat;
addrList[i].lng = data.result.location.lng;
} else {
addrList[i].status = -1;
}
resolve(i);
});

});
}

var AllPromise = [];
for( var i in addrList) {
AllPromise.push(parseAddrList(i).then(function(index){
latlng2Addr(index);
console.log(index);
}));
}
Promise.all(AllPromise).then(function(){
console.log('done');

console.log(addrList);
//此处需要使用setTimeout
//否则 console.log 和JSON.stringify的结果不一样
setTimeout(function(){
var strData = JSON.stringify(addrList);
console.log(strData);
$.ajax({
type : 'POST',
url: '',
data: {
list:JSON.stringify(addrList)
},
dataType: 'json'
}).done(function(json) {

}).fail(function() {

});
}, 100);
});
})()
</script>
</html>