【问题标题】:Geo heat map(google) with large data具有大数据的地理热图(谷歌)
【发布时间】:2017-01-18 20:36:45
【问题描述】:

我想在 google map 中绘制 热图 来显示一个城市的出租车分布

我得到了大约 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);
});

我得到了什么:

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

预期是这样的:

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

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

【问题讨论】:

  • data.json的内容是什么样的?
  • { "fromLocation": {"lat": "22.37898", "lng": "114.108169"}}

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


【解决方案1】:

您的 JSON 文件已将纬度和经度作为字符串获取。 Google 的 LatLng 构造函数期望这些值是数字。试试这个,它将它们从"22.37898" 之类的字符串转换为22.37898 之类的浮点数

heatmapData.push(new google.maps.LatLng(
    parseFloat(val.fromLocation.lat), 
    parseFloat(val.fromLocation.lng))
);

【讨论】:

  • 改代码后得到错误消息:Uncaught TypeError: Cannot read property 'NaN' of undefined visualization_impl.js:2
  • 那你的数据有问题。你的.each 循环中的console.log(val) 是什么样的?
  • 操作,问题已解决。我里面有一些空白数据。非常感谢!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-03-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多