如何在没有要调用的变量的情况下访问此json数据?

时间:2014-03-28 23:46:32

标签: jquery json google-maps

如何使用此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"
  }
]

1 个答案:

答案 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文件。