Question

我想将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包含主要基于时间图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-->

Answer 1

我在您的网页上看到了一个javascript错误：Uncaught TypeError: undefined is not a function在此行：data.forEach(function(item)

数据是一个Object，而不是一个数组

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

（使它成为一个数组，而不是一个数组作为其“结果”属性的对象）

Answer 2

如果您不想更改json，请定义自定义加载程序并配置Timemap以使用它。

$(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
    ]
});
});

Answer 3

将您的JSON格式更改为：

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

]

将JSON加载到时间映射中

3 个答案: