通過JSON密鑰循環添加Google地圖數據

我發現了很多類似的問題，但沒有一個對我的特定問題有用。基本上，我有一個AJAX調用，可以獲取用戶字典以及他們的經度和緯度。通過JSON密鑰循環添加Google地圖數據

$(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循環中，我做了什麼錯誤？

來源

2017-07-27 Sarah

除了數組定義中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); 
    }); 
})

來源

2017-07-27 14:41:10

我想這會工作，但由於某種原因，它不一樣，第二行，並說「參考錯誤：數據未定義。「 – Sarah

您需要在您爲回調AJAX請求所提供的功能中運行它。我編輯了答案給你完整的代碼。 –

謝謝，這工作！我認爲它與我在哪裏運行它有關。編輯一些小的修復。 – Sarah

通過JSON密鑰循環添加Google地圖數據

回答

相關問題