0

gmap3 ( jqueryプラグイン) を使用して Google マップ インターフェイスを表示します。JSON ファイルからデータを読み込もうとしていますが、何らかの理由で実行されません。マップが表示され、addMarkers() 関数が呼び出されていますが、console.log() を function(data) 内のどこかに配置すると、表示されません。

私はこれらの匿名関数について多少混乱しており、非同期関数を使用したことがありません。アドバイスをいただければ幸いです。

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."} }
  ]
}
4

1 に答える 1

0

愚かなことに、 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."} }
  ]
}
于 2013-05-19T01:17:01.617 に答える