javascript - 使用 Google Maps API 异步调用的响应

Question

我有一个 .json 文件，我正在尝试将其作为文本字符串导入。

这是确切的文件内容:

{ "type": "Polygon", "coordinates": [ [ [ 1.5887868, 50.8315241 ], [ 1.5830702, 50.8466931 ].......  ] ] ] }

我正在尝试使用以下方法导入它:

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

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

我该如何实现这个目标？

更新

所以我的整个代码是:

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

  return JSON.stringify(data);

});

但现在我得到下面的屏幕截图:

我猜这是我想摆脱的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);

}

现在，这个可以工作了，但我觉得它一定效率非常低，所以我想将所有坐标保存在一个文件中，并将它们动态地作为来自 function mapClick(data) 的主要输入改变了。这是可能的，从你们向我展示的情况来看，我可以编写一个 ajax 查询，或者在函数内使用 jQuery.get ，这将引入 json 字符串，但是对我没有好处，因为它被困在该函数内部，我无法访问它。

这是我的挫败感......

最终更新

好的 - 感谢 this page 和 this page 以及 @Lye-Fish 最终帮助我理解了这一切是如何工作的。

在今晚的搜索中，我发现了大量关于这个主题各个方面的帖子，所以我想在我最终如何让这两件事发挥作用时彻底结束:

1. 从 ajax 调用中获取一些东西的想法(我发帖的最初原因)
2. 如何将其重新绑定(bind)到 Google Maps API。

HTML

<area shape="poly" coords="..." href="#" alt="california" onClick="mapClick(alt)"/>

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);

}

注意，我没有在最终的 territory 函数中使用 drawMap - 这是另一段代码的一部分，这使得这一切都太长而无法证明这一点......

Answer 1

首先，也是最重要的，您的 jsonString 变量不会保存响应。它将保存请求的 jqXHR 对象，该对象最终将得到响应，但您需要在回调中访问它。

其次，使用JSON.stringify不是一个合适的解决方案。以序列化形式序列化已经可用的数据是没有意义的。

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

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

你的return语句根本没有任何作用，所以我放弃了它。 jQuery.get 不会阻止执行，这意味着您需要在回调中获取它。

<小时/>

如果您确实不想解析它，那么我建议更改您的响应 header ，以便 jQuery 不会意识到它是 JSON 数据。我很确定这就是它自动为您解析它的原因。

如果您从此更改标题:

Content-Type: application/json

对此:

Content-Type: text/plain

应该可以。

<小时/>

或者您可以发出 jQuery.ajax 请求，并指定 "dataType: text"，这也可能有效。 jQuery.get 确实为您提供了另一个参数，您可以传递它来覆盖猜测，但它似乎仅限于 xml、json、html 或 脚本。

<小时/>

为了处理代码的异步性质，您需要在回调中执行。由于您可能不希望其中有一大堆应用程序代码，因此您可以将其放入不同的函数中并调用它，并向其传递数据。

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);
}

<小时/>

如果出于不同目的发出相同类型的请求，您可以将其放入另一个函数中，并传递一个回调函数以针对不同情况进行调用。

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);

<小时/>

如果您在使用 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);
}

您还可以检查回调中的 this.status 是否有 HTTP 响应代码(如果它们对您有意义)。仅供引用，this 与 xhr 变量保存的对象相同。