將JSON加載到時間地圖

我想將JSON加載到時間地圖中，而我的代碼似乎缺少正確配置JSON的內容。下面將JSON加載到時間地圖

{"results": [{"Lat": "34.0453113", "text": "Historic Core DTLA", "Lon": "-118.2501836", "bicyclistCount": "26", "date": "2014-10-15"}, {"Lat": "34.0444899", "text": "Spring @ 7", "Lon": "-118.2523059", "bicyclistCount": "16", "date": "2014-10-26"}]}

這link JSON格式包含主要是基於一個timemap example HTML文件。它打開時間線和地圖，但數據不加載。此外，地圖不會放大和縮小，但我首先要解決JSON加載問題。你有什麼可以改變的建議嗎？添加下面的JavaScript代碼。謝謝，侯佩岑

的JavaScript代碼：

var tm; 
var errFn = function(jqXHR, textStatus, errorThrown){ 
    alert(textStatus); 
    } 

$(function() { 

tm = TimeMap.init({ 
    mapId: "map",    // Id of map div element (required) 
    timelineId: "timeline",  // Id of timeline div element (required) 
    options: { 
     eventIconPath: "../images/" 
    }, 
    datasets: [ 
     { 
      title: "JSON String Dataset", 
      type: "json", 

      options: { 
       // json file 
       url: "output.json", <!--this file sits in the same folder as the HTML--> 
       error: errFn, 
      } 
     } 
    ], 

    bandIntervals: [ 
     Timeline.DateTime.DAY, 
     Timeline.DateTime.WEEK 
    ] 
    }); 

    <!--start loading data--> 
     function transformData(data) {  
     var text, Lat, Lon, bicyclistCount, date; <!--is this how the data is called?--> 

    var newData = { 
    "title" : text, 
    "start" : date, 

    "options" : { 
     "description" : bicyclistCount 
    } 
}; 
newData["point"] = { 
    "lat" : Lat, 
    "lon" : Lon, 
};    
} 
}); 
<!--end loading data-->

來源

2014-10-31 Patty Jula

你檢查錯誤日誌控制檯 – meda 2014-10-31 21:16:12

我看到你的頁面上的JavaScript錯誤：'遺漏的類型錯誤：未定義不上這條線function'：' data.forEach（函數（item）' – geocodezip 2014-10-31 21:20:44

如果你不想改變JSON然後定義自定義的加載和配置時間表來使用它。

$(function() { 

TimeMap.loaders.custom = function(options) { 
    var loader = new TimeMap.loaders.remote(options); 
    loader.parse = JSON.parse; 
    loader.preload = function(data) { 
     return data["results"] 
    } 
    loader.transform = function(data) { 
     return { 
      "title" : data.text, 
      "start" : data.date, 
      "options" : { 
      "description" : data.bicyclistCount 
     }, 
     "point": { 
      "lat" : data.Lat, 
      "lon" : data.Lon, 
      } 
     }; 
    }; 
    return loader; 
}; 

tm = TimeMap.init({ 
    mapId: "map",    // Id of map div element (required) 
    timelineId: "timeline",  // Id of timeline div element (required) 
    options: { 
     eventIconPath: "../images/" 
    }, 
    datasets: [ 
     { 
      title: "JSON String Dataset", 
      type: "custom", 

      options: { 
       // json file 
       url: "output.json" 
      } 
     } 
    ], 

bandIntervals: [ 
     Timeline.DateTime.DAY, 
     Timeline.DateTime.WEEK 
    ] 
}); 
});

來源

2014-10-31 22:25:39

）謝謝你，我沒有提到它，但是如果不需要更改JSON，它會更好。 – 2014-10-31 23:30:47

我看到你的頁面上的JavaScript錯誤：在這條線Uncaught TypeError: undefined is not a function：data.forEach(function(item)

數據是一個對象，而不是一個數組

Object 
results: Array[10]

更改您的JSON：

{"results": [{"Lat": "34.0453113", "text": "Historic Core DTLA", "Lon": "-118.2501836", "bicyclistCount": "26", "date": "2014-10-15"}, {"Lat": "34.0444899", "text": "Spring @ 7", "Lon": "-118.2523059", "bicyclistCount": "16", "date": "2014-10-26"}]}

要：

[{"Lat": "34.0453113", "text": "Historic Core DTLA", "Lon": "-118.2501836", "bicyclistCount": "26", "date": "2014-10-15"}, {"Lat": "34.0444899", "text": "Spring @ 7", "Lon": "-118.2523059", "bicyclistCount": "16", "date": "2014-10-26"}]

（使一個數組不是一個數組作爲它的「結果」屬性的對象）

來源

2014-10-31 22:21:29 geocodezip

-1

更改您的JSON格式設置爲：

[ 
    { 
    "title":"example", 
    "start":"1968-10-12", 
    "end": "1968-11-12", 
    } 

]

來源

2016-04-07 18:11:31

將JSON加載到時間地圖

回答

相關問題