具有大数据的地理热图(谷歌)

时间:2016-09-11 04:20:52

标签: google-maps d3.js google-maps-api-3 data-visualization heatmap

我想在谷歌地图中绘制热图,以显示某个城市的出租车分布

我在出租车起点位置(纬度和经度)附近 4000数据

以下是我的一些剧本:

首先我设置了谷歌地图:

var hongkong = new google.maps.LatLng(22.28552,114.15769 );

map = new google.maps.Map(document.getElementById('map'), {
    center: hongkong,
    zoom: 11,
 });

然后,我从JSON文件中读取数据并制作热图:

jQuery.getJSON("data.json", function(data) {
    var heatmapData = [];
    jQuery.each(data, function(key, val) {
          heatmapData.push(new google.maps.LatLng(val.fromLocation.lat, val.fromLocation.lng));
    });

    var heatmap = new google.maps.visualization.HeatmapLayer({
          data: heatmapData
    });
    heatmap.setMap(map);
});

我得到了什么: enter image description here

你什么也看不见。然后我缩小了,我得到了:

enter image description here

预期是这样的: enter image description here

有什么问题?我得到的数据是否彼此太接近了?

有没有更好的方法来绘制热图以显示出租车的分布情况?谢谢。

1 个答案:

答案 0 :(得分:1)

您的JSON文件已经将纬度和经度作为字符串。 Google的LatLng构造函数希望这些值为数字。试试这个,将它们从像"22.37898"这样的字符串转换为像22.37898

这样的浮点数
heatmapData.push(new google.maps.LatLng(
    parseFloat(val.fromLocation.lat), 
    parseFloat(val.fromLocation.lng))
);