如何使用此jquery脚本访问此json数据?
原始脚本使用JSON文件,其中所有数据都嵌套在“markers:”下我的JSON没有嵌套。所以我无法弄清楚如何正确访问它。
正在修补此问题并研究其他示例,但似乎其他人正在使用与原始文档更相似的JSON文件。
我的剧本:
<script type="text/javascript">
$(function() {
// Also works with: var yourStartLatLng = '59.3426606750, 18.0736160278';
$('#map_canvas').gmap().bind('init', function() {
// This URL won't work on your localhost, so you need to change it
// see http://en.wikipedia.org/wiki/Same_origin_policy
$.getJSON( 'http://localhost:3000/locations.json', function(data) {
$.each( data, function(marker) {
$('#map_canvas').gmap('addMarker', {
'position': new google.maps.LatLng(marker.latitude, marker.longitude),
'bounds': true,
}).click(function() {
$('#map_canvas').gmap('openInfoWindow', { 'content': marker.content }, this);
});
});
});
});
});
</script>
我的JSON:
[
{
"id": 2,
"address": "woo woo woo",
"latitude": 10.6959353,
"longitude": -61.13116189999999,
"url": "locations/2.json"
},
{
"id": 3,
"address": "hi hi hi",
"latitude": 20.784575,
"longitude": -73.9488803,
"url": "/locations/3.json"
},
{
"id": 4,
"address": "blah blah balh",
"latitude": 50.70984199999999,
"longitude": -72.958056,
"url": "/locations/4.json"
}
]
答案 0 :(得分:1)
您的代码看起来好像有两个问题。首先,$.each
回调函数应该接受两个参数,第一个参数是数组中当前元素的索引:
$.each( data, function(idx, marker) {
此处,marker
不是数据或数据结构中的现有属性或要求,而是数组中位置idx
处对象的占位符名称。例如,idx=0
时,您会找到
marker === {
"id": 2,
"address": "woo woo woo",
"latitude": 10.6959353,
"longitude": -61.13116189999999,
"url": "locations/2.json"
}
这指出了第二个问题,即JSON文件中的对象没有content
属性,因此在单击函数中marker.content
将是未定义的。
如果这还不足以让你前进,那么请提供一些有关您期望看到的行为,发生了什么,以及可能出现在您的javascript控制台中的任何消息等的更多信息。
更新:为了回应评论主题,除了最初缺少的代码之外,完整的解决方案还包括不违反same-origin policy。浏览器必须从与包含脚本的页面相同的位置加载正在加载的JSON文件。