将JSON载入时间表 [英] Loading JSON into timemap

问题描述

我想将JSON加载到时间表中，并且我的代码似乎缺少正确配置JSON的功能. JSON格式如下

I want to load a JSON into a timemap, and my code seems to be missing something to configure the JSON correctly. JSON format below

{结果":[{"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"}]}

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

此链接包含主要基于时间表

This link contains the html file based mainly on a timemap example. It opens up the timeline and map, but the data does not load. Also the map won't zoom in and out, though I want to solve the JSON load issue first. Do you have a suggestion on what I can change? Adding the JavaScript code below. Thanks, Patty

JavaScript代码:

The JavaScript code:

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-->

推荐答案

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

If you don't want to change json then define custom loader and configure Timemap to use it.

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

这篇关于将JSON载入时间表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！