为什么这个 json 检索代码不起作用？

Question

我正试图使用纯javascript从谷歌的地图api中获取som信息。为此，我查询了一个给定的地址，以便检索相关信息。我一直在谷歌上搜索，找到了这个方法，但有些地方不起作用：我用console.log设置的跟踪不会出现在控制台上。

这是我的代码

function getZipcode(address){
if(address){
//Formatted address
console.log("address  "+ address);
var formattedAddr = address.split(' ').join('+');
console.log("formattedAddr  "+ formattedAddr);
//Send request and receive json data by address
var url1 = 'http://maps.googleapis.com/maps/api/geocode/json?address=' + formattedAddr +'&sensor=true_or_false';
console.log("url1  "+ url1);

var geocodeFromAddr ;//= get_json(url1);
// recuperar json
console.log("pre geocodeFromAddr " );
geocodeFromAddr = function(url1, trataJSON) {
console.log("geocodeFromAddr " );
var xhr = new XMLHttpRequest();
xhr.open('GET', url1, true);
xhr.responseType = 'json';
xhr.onload = function() {
console.log("geocodeFromAddr onload " );
var status = xhr.status;
console.log("geocodeFromAddr status " + status );                           
if (status === 200) {
trataJSON(null, xhr.response);
} else {
trataJSON(status, xhr.response);
}
};
xhr.send();
};
console.log("post geocodeFromAddr " );
}
}

这是我的回拨

function trataJSON(err, data){
console.log("trataJSON " );
if(err){
console.log("trataJSON error " + err);
}else{
console.log("trataJSON ok " + data);
}
}

我正在测试"calle pintor oliet 4 castellon"，控制台上的日志是：

query=调用pintor oliet 4 castellon

被称为pintor oliet 4 castellon 的地址

formattedAddr caller+pintor+oliet+4+castellon

url1http://maps.googleapis.com/maps/api/geocode/json?address=calle+pintor+oliet+4+castellon&传感器=真_假

来自Addr 的预地理编码

后地理编码FromAddr

您可以看到，显然，它从未进入geocodeFromAddr代码段。此外，您还可以检查googleapisURL是否正常工作——根本不会返回错误。

有人能给我指一些线索吗？

Answer 1

如果您的目标是任何其他可能需要Polyfill进行提取的浏览器，请在Chrome中尝试此代码。

fetch('https://maps.googleapis.com/maps/api/geocode/json?address=calle+pintor+oliet+4+castellon&sensor=true_or_false')
.then(res => res.json())
.then(d => {
if (d.results && d.results.length) {
let address_components = d.results[0].address_components;
let postalCode = {};
address_components.forEach(addressComponent => {
if(addressComponent.types.includes("postal_code")){
postalCode = addressComponent;
}
})
console.log(postalCode);
console.log('Postal Code:->', postalCode.long_name);
}
})