使用$. getjson从JSON中加载地图数据

Loading map data from JSON using $.getJSON

本文关键字：加载 地图 数据 JSON getjson 使用      更新时间：2023-09-26

使用gmap3(一个jquery插件)显示谷歌地图界面。我试图从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."} }
  ]
}

傻我，只是检查了我的JSON格式使用http://jsonlint.com/和发现它是畸形的。我需要将"键"名称括在引号中，像这样…

{
"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."} }
  ]
}
相关文章：