Question

我发现了很多类似的问题，但没有一个对我的特定问题有用。基本上，我有一个AJAX调用，可以获取用户字典及其经度和纬度。

$(function() {
  $.getJSON($SCRIPT_ROOT + '/_userInfo',
  function(data) {
    var userinfo = $("#userinfo").text(data.userinfo);
  });
})

返回类似以下JSON的内容：

{
  "userinfo": {
    "bob": [
      40.089158, 
      -88.239035, 
      "at home", 
      null, 
    ], 
    "sarah": [
      40.486545, 
      -89.00478, 
      "at work", 
      null, 
    ], 
    "michael": [
     40.089018, 
     -88.239361, 
     "in class", 
     null, 
    ]
  }
}

我不知道关键名称会是什么，因此我不确定如何放置标记。要简单地绘制点，我只需要第一个值（纬度）和第二个值（经度）。我尝试过类似的东西，但它不起作用：

var data = [
   for (var i = 0; i < data.userinfo.length; i++){
     new google.maps.LatLng(data.userinfo[i].[0], data.userinfo[i].[1]),
   }
];

map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

heatmap = new google.maps.visualization.HeatmapLayer({
    data: data,
    radius: 20
});

它不会将userinfo识别为有效的变量名称。我不熟悉AJAX的语法，在我的AJAX调用或地图数据的for循环中我做错了什么？

Answer 1

除了数组定义中for的语法问题之外，问题是因为userinfo是一个对象，所以你不能像使用数组一样遍历它。

相反，您可以使用Object.keys获取属性名称，然后循环遍历以下内容：

$(function() {
  $.getJSON($SCRIPT_ROOT + '/_userInfo', function(data) {
    var locations = [];
    Object.keys(data.userinfo).forEach(function(key) {
      var user = data.userinfo[key];
      locations.push(new google.maps.LatLng(user[0], user[1])) 
    });

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: locations,
      radius: 20
    });
    heatmap.setMap(map);
  });
})

循环访问JSON密钥以添加Google地图数据

1 个答案: