javascript - 使用 $.getJSON 从 JSON 加载地图数据

Question

使用gmap3（一个 jquery 插件）来显示一个谷歌地图界面。我正在尝试从 JSON 文件加载我的数据，但由于某种原因它没有执行。地图显示，正在调用 addMarkers() 函数，但如果我将 console.log() 放在函数（数据）内的任何位置，它不会显示。

我对这些匿名函数有些困惑，以前没有使用过异步函数。任何建议将不胜感激。

Javascript

$(document).ready(function(){
  displayMap();
  addMarkers();
});


// Create map with options
function displayMap(){
  $('#map_canvas').gmap3({
   map: {
     options: mapOptions
   }          
  });
};

// Load data and add markers for each data point
function addMarkers(){
  $.getJSON( dataURL, function(data) {          
    $.each( data.markers, function(i, marker) {
      console.log( marker.lat + ':' + marker.lng + ':' + marker.data.category + ':' + marker.data.content );
    })
  });                  
};

JSON

{
markers: [
    { lat:-30, lng:145, data: {title: "Le Restaurant", category:"Restaurant", content:"Some French restaurant"} },
    { lat:-30, lng:145, data: {title :"Gem Cafe", category:"Cafe", content:"They sell coffee"} },
    { lat:-30, lng:145, data: {title :"Home", category:"Home", content:"Home sweet home."} }
  ]
}

Answer 1

愚蠢的我，刚刚使用http://jsonlint.com/检查了我的 JSON 格式，发现它格式错误。我需要用引号将“关键”名称括起来......

{
"markers": [
    { "lat":-30, "lng":145, "data": {"title": "Le Restaurant", "category":"Restaurant", "content":"Some French restaurant"} },
    { "lat":-30, "lng":145, "data": {"title" :"Gem Cafe", "category":"Cafe", "content":"They sell coffee"} },
    { "lat":-30, "lng":145, "data": {"title" :"Home", "category":"Home", "content":"Home sweet home."} }
  ]
}