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

}

现在，这个 WORKS，但我觉得它必须非常低效，所以我想将所有坐标保存在一个文件中，并将它们作为 @ 的主要输入动态引入987654334@ 已更改。这必须成为可能，根据你们向我展示的内容，我可以编写一个ajax 查询，或者在函数内使用jQuery.get，这将带来 json 字符串in，但这对我没有好处，因为它被困在该函数内部，我无法使用它。

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

最终更新

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

今晚在搜索 SO 时，我发现了大量关于这个主题的各个方面的帖子，所以我想全力以赴，最终让这两件事发挥作用：

1. 从 ajax 调用中获取一些东西的想法（我发帖的最初原因）
2. 如何将其重新绑定到 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);

}

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

Answer 1

像这样使用 JSON.stringify

console.log(JSON.stringify(data));

Answer 2

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

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

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

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

你的return 声明什么也没做，所以我放弃了它。 jQuery.get 不会阻止执行，这意味着您需要在回调中获取它。

---

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

如果您从这里更改标题：

Content-Type: application/json

到这里：

Content-Type: text/plain

它应该可以工作。

---

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

---

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

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

如果 HTTP 响应代码对您有意义，您还可以检查回调中的 this.status。仅供参考，this 与 xhr 变量持有的对象相同。

Answer 3

我认为您可以使用 $.ajax，因为 .get 在下使用它，并像这样定义 dataType，所以没有双重解析..

$.ajax({
  url: './polygons/1.json',
  method: "POST",
  dataType: "text"
});