Heatmap.js 不渲染答案

【问题标题】：Heatmap.js not renderingHeatmap.js 不渲染
【发布时间】：2013-12-21 10:48:15
【问题描述】：

我正在尝试将 heatmap.js 与 Google 地图集成以进行一些可视化工作。我提到了这个：

http://www.patrick-wied.at/static/heatmapjs/example-heatmap-googlemaps.html

因此，我在本地示例中的代码看起来几乎相同：

<!DOCTYPE html>
<html lang="en">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">    </script>
<div id="heatmapArea" style="width:1024px;padding:0;height:768px;cursor:pointer;position:relative;"></div>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/heatmap.js"></script>
<script type="text/javascript" src="js/heatmap-gmaps.js"></script>
<script type="text/javascript">
    window.onload = function(){
    // standard gmaps initialization
    var myLatlng = new google.maps.LatLng(48.3333, 16.35);
    // define map properties
    var myOptions = {
      zoom: 3,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: false,
      scrollwheel: true,
      draggable: true,
      navigationControl: true,
      mapTypeControl: false,
      scaleControl: true,
      disableDoubleClickZoom: false
    };
    // we'll use the heatmapArea 
    var map = new google.maps.Map($("#heatmapArea")[0], myOptions);

    // let's create a heatmap-overlay
    // with heatmap config properties
    var heatmap = new HeatmapOverlay(map, {
        "radius":20,
        "visible":true, 
        "opacity":60
    });

    // here is our dataset
    // important: a datapoint now contains lat, lng and count property!
    var testData={
            max: 46,
            data: [{lat: 33.5363, lng:-117.044, count: 1},{lat: 33.5608, lng:-117.24,     count: 1},{lat: 38, lng:-97, count: 1},{lat: 38.9358, lng:-77.1621, count: 1}]
    };

    // now we can set the data
    google.maps.event.addListenerOnce(map, "idle", function(){
        // this is important, because if you set the data set too early, the     latlng/pixel projection doesn't work
        heatmap.setDataSet(testData);
    });

};
</script>
</html>

正如我所料，我在我的 div 中获得了谷歌地图渲染，但热图本身并未在 testData 提供的经纬度数据点上渲染。

浏览器控制台中没有错误......

有人看到我在这里做了一些愚蠢的事情吗？

【问题讨论】：

我最好的猜测是我错过了上面的内容，或者 API 发生了一些微妙的变化，并且 Heatmap.js 没有保持最新。作者没有回复我的问题，这里也没有任何东西，所以我想我会寻找另一个解决方案：/
你试过HeatmapLayer in the visualization library吗？

标签： javascript jquery google-maps heatmap

【解决方案1】：

更新

由于 heatmap.js v1 现在是retired，我还在这里包含了一个基于当前版本 v2 的示例：

http://jsfiddle.net/Fresh/pz4usuLe/

这是基于Google Maps example found on the heatmap website。

原答案

我看了这个，这绝对是令人困惑的。我拿走了你的代码，让它在这里工作：

http://jsfiddle.net/Fresh/nRQbd/

（请注意，上面的原始示例不再适用，因为 v1 已停用，要查看此与 v2 一起使用，请参阅此 http://jsfiddle.net/Fresh/pz4usuLe/）

请注意我如何修改 testData 中的数据点以在地图上绘制结果：

var testData = {
    max: 3,
    data: [{
        lat: 48.3333,
        lng: 16.35,
        count: 100
    }, {
        lat: 51.465558,
        lng: 0.010986,
        count: 100
    }, {
        lat: 33.5363,
        lng: -5.044,
        count: 100
    }]
};

我还增加了每个点的计数值；点值 1 不可见，但增加它的值（例如增加到 100）会增加渲染点的颜色强度（从而使其可见！）。

当点绘制在可见地图边界之外时，似乎会出现此问题。我通过调试推断出这一点：

heatmap.setDataSet(testData);

(取消注释 "debugger;" 在小提琴中调试 web 控制台中的代码)

heatmap-gmaps.js 中导致数据点不被渲染的代码在这里：

while(dlen--){
 latlng = new google.maps.LatLng(d[dlen].lat, d[dlen].lng);
 if(!currentBounds.contains(latlng)) {
  continue;
  }
 me.latlngs.push({latlng: latlng, c: d[dlen].count});
 point = me.pixelTransform(projection.fromLatLngToDivPixel(latlng));
 mapdata.data.push({x: point.x, y: point.y, count: d[dlen].count});
}

您的示例中的所有数据点似乎都不包含在渲染地图区域的当前边界内。因此 "!currentBounds.contains(latlng)" 始终为真，不会向 mapdata 对象添加任何点。

这个假设似乎是正确的，因为您的数据集中的第一个点（即纬度：33.5363，lng:-117.044）实际上在圣地亚哥（使用它来确认http://itouchmap.com/latlong.html），这在渲染中不可见地图。

【讨论】：

您所做的另一件事是将计数从 1 更改为 100，这也是必需的。
@geocodezip 是的，好点。我将更新我的答案以突出显示该更改。
真棒故障。我有点松了一口气，问题并不完全在于我尝试使用该库。有了你上面的建议，我应该能够整合它并继续前进。谢谢！
引用的 jsfiddle 似乎不再有效。
感谢您告诉我@SomaHoliday，我会在这个前夜看看。