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时,我发现了很多关于这个主题方面的帖子,所以我想在最终让这两件事情起作用的时候就死了:
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
功能中使用 - 这是另一段代码的一部分,这使得这个问题太长时间无法证明这一点......
首先,最重要的是,您的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
,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);
}
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.status
HTTP响应代码对您有意义,您还可以在回调中查看.仅供参考,this
是xhr
变量所持有的同一对象.
归档时间: |
|
查看次数: |
598 次 |
最近记录: |