使用来自Google Maps API的异步调用的响应

Bri*_*ell 2 javascript jquery json google-maps-api-3

我有一个.json文件,我试图导入为文本字符串.

这是确切的文件内容:

{ "type": "Polygon", "coordinates": [ [ [ 1.5887868, 50.8315241 ], [ 1.5830702, 50.8466931 ].......  ] ] ] }
Run Code Online (Sandbox Code Playgroud)

我正在尝试使用它导入它:

jsonString = jQuery.get('./polygons/1.json', function(data) {    
  console.log(data);            
}); 
Run Code Online (Sandbox Code Playgroud)

然而,console.log(data)作为一个数组出现,我不希望它 - 我只想要文本文本字符串,就像它在文件中一样.

在此输入图像描述

我该如何做到这一点?

更新

所以我的整个代码是:

jsonString = jQuery.get('./polygons/1.json', function(data) {    

  return JSON.stringify(data);

});
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

但现在我在下面看到这个截图:

我想这responseText就是我想要离开的.为什么要将jQuery.get所有这些额外信息添加到我的文件中?我究竟做错了什么?

第二次更新

我总是感觉不好,当有人需要他们的时间来解释的东西给我,我不明白. 因此,这整个事物的存在使得我可以根据用户的需求提取动态数据jsonString.

但是现在,我必须通过制作具有地理数据坐标的单个文件,然后使用它来完成这一壮举 map.data.loadGeoJson('./maps_polygons/' + territory + '.json');

function mapClick(data) {

territory = data; //the section of the map that the user clicks on, e.g. `california` or `texas`

var mapOpt = {
  center:new google.maps.LatLng(50.477971, 0.482999),  
  zoom:8,  
  };

map = new google.maps.Map(document.getElementById("googleMap"),mapOpt);

map.data.loadGeoJson('./maps_polygons/' + territory + '.json');


google.maps.event.addDomListener(window, 'load', initialize);

}
Run Code Online (Sandbox Code Playgroud)

现在,这个工作,但我觉得它必须非常低效,所以我想把所有坐标保存在一个文件中,并将它们作为主要输入动态地引入function mapClick(data).这一定是可能的,并且从什么你都显示,我可以编写一个ajax查询,或使用jQuery.get一个函数中,这将带来JSON字符串,但确实我没有好,因为它里面卡住该功能,我无法达到它.

这是我的沮丧......

最后更新

好的 - 大声喊出这个页面本页,以及@Lye-Fish最终帮助我理解这一切是如何运作的.

在今晚搜索SO时,我发现了很多关于这个主题方面的帖子,所以我想在最终让这两件事情起作用的时候就死了:

  1. 从ajax调用获取内容的想法(我的帖子的原始原因)
  2. 如何将其与Google Maps API联系起来.

HTML

<area shape="poly" coords="..." href="#" alt="california" onClick="mapClick(alt)"/>
Run Code Online (Sandbox Code Playgroud)

Javascript

function mapClick(data) {

territory = data;

function getPolygons(territory, passTodoWork) {
    jQuery.get('./maps_polygons/'+ territory +'.json', function(data, status, jqXHR) {    
        var coordinates = JSON.parse(jqXHR.responseText);
        passTodoWork(territory,coordinates);
    });
}
function drawMap(firstItem, secondItem) {
    var mapOpt = {
    center:new google.maps.LatLng(50.367247, 2.745326),  
    zoom:8,  
    };

  map = new google.maps.Map(document.getElementById("googleMap"),mapOpt);


  map.data.addGeoJson(secondItem);

  map.data.setStyle({  
    fillColor: '#2b86cc',
    strokeColor: '#1e5c8c'
  });


  google.maps.event.addDomListener(window, 'load', initialize);
}

getPolygons(territory, drawMap);

}
Run Code Online (Sandbox Code Playgroud)

请注意,我没有territory在最后的drawMap功能中使用 - 这是另一段代码的一部分,这使得这个问题太长时间无法证明这一点......

dep*_*erm 5

像这样使用JSON.stringify

console.log(JSON.stringify(data));
Run Code Online (Sandbox Code Playgroud)


Lye*_*ish 5

首先,最重要的是,您的jsonString变量不会保留响应.它将保留请求的jqXHR对象,最终会有响应,但您需要在回调中访问它.

其次,使用JSON.stringify不是一个妥善的解决办法.将序列化形式的数据序列化是没有意义的.

jqXHR对象包含.responseText将为您提供实际未解析的响应主体的属性.您也不需要从该变量中获取它.您可以从第3个参数获取它到回调.

jQuery.get('./polygons/1.json', function(data, status, jqXHR) {    
    console.log(jqXHR.responseText);
});
Run Code Online (Sandbox Code Playgroud)

return你所做的陈述什么都没做,所以我放弃了.该jQuery.get不会阻止执行,这意味着你需要把它捡起来回调里面.


如果你真的不想解析它,那么我建议你改变你的响应头,这样jQuery就不会意识到它是JSON数据.我很确定这就是为什么它会自动解析它的原因.

如果您更改此标头:

Content-Type: application/json
Run Code Online (Sandbox Code Playgroud)

对此:

Content-Type: text/plain
Run Code Online (Sandbox Code Playgroud)

它应该工作.


或者您可以发出jQuery.ajax请求并指定"dataType: text",这也可能有效.该jQuery.get确实给你,你可以通过重写猜测另一种说法,但似乎它仅限于xml,json,htmlscript.


要处理代码的异步性质,您需要在回调中获取执行.由于您可能不需要大量的应用程序代码,因此可以将其放在不同的函数中并调用它,并将数据传递给它.

jQuery.get('./polygons/1.json', function(data, status, jqXHR) {    
    console.log(jqXHR.responseText);
    // do some other stuff in here

    doWork(jqXHR.responseText);
});

function doWork(data) {
    console.log("Now we have it here: ", data);
}
Run Code Online (Sandbox Code Playgroud)

如果同一类型的请求将用于不同的目的,您可以将其放在另一个函数中并传递一个回调函数,以便针对不同的情况进行调用.

function getPolygons(callback) {
    jQuery.get('./polygons/1.json', function(data, status, jqXHR) {    
        console.log(jqXHR.responseText);
        // do some other stuff in here

        callback(jqXHR.responseText);
    });
}

function doWork(data) {
    console.log("Now we have it here: ", data);
}

function doOtherWork(data) {
    console.log("And now it's here: ", data);
}

getPolygons(doWork);

// ...some other part of the app...

getPolygons(doOtherWork);
Run Code Online (Sandbox Code Playgroud)

如果你仍然无法使用jQuery做你不想要的东西,那就自己做一下XHR请求吧.

function getPolygons(callback) {
    var xhr = new XMLHttpRequest()
    xhr.open("GET", "./polygons/1.json", true);
    xhr.onreadystatechange = function() {
        if (this.readyState === 4) {
            console.log(this.responseText);
        // do some other stuff in here

            callback(this.responseText);
        }
    };
    xhr.send(null);
}
Run Code Online (Sandbox Code Playgroud)

如果this.statusHTTP响应代码对您有意义,您还可以在回调中查看.仅供参考,thisxhr变量所持有的同一对象.