Heatmap.js无法渲染

Question

I'm attempting to integrate heatmap.js with Google maps to do some visualization work. 我正在尝试将heatmap.js与Google地图集成以进行一些可视化工作。 I referred to this: 我提到了这个：

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

As such, my code in my local sample looks nearly identical: 因此，我本地示例中的代码看起来几乎相同：

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

I'm getting the google map rendering in my div as I expect, but the heatmap itself isn't rendering on the lat-long data points provided by testData. 我正在按照我的预期在我的div中获取谷歌地图渲染，但热图本身不会在testData提供的lat-long数据点上呈现。

No errors in the browser console.... 浏览器控制台中没有错误....

Someone see that I'm doing something foolish here? 有人看到我在做傻事吗？

Answer 1

Update 更新

As heatmap.js v1 has now been retired I have also included an example based on the current version, v2, here: 由于heatmap.js v1现已退役，我还提供了一个基于当前版本v2的示例：

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

This is based on the Google Maps example found on the heatmap website . 这是基于热图网站上的Google Maps示例。

Original Answer 原始答案

I looked at this and it is definitely confusing. 我看着这个，这绝对令人困惑。 I took your code and got it to work here: 我拿了你的代码并让它在这里工作：

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

(Note that the original example above no longer works as v1 has been retired, to see this working with v2 see this http://jsfiddle.net/Fresh/pz4usuLe/ ) （注意上面的原始示例不再起作用，因为v1已经退役，要看到这与v2一起使用，请参阅http://jsfiddle.net/Fresh/pz4usuLe/ ）

Note how I modified the datapoints within testData to get a result drawn on the map: 请注意我如何修改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
    }]
};

I also increased the count value for each of these points; 我还增加了每个点的计数值; a point value of 1 is not visible, but increasing it's value (eg to 100) increases the intensity of the colour of the rendered point (thereby making it visible!). 点值1不可见，但增加它的值（例如，增加到100）会增加渲染点的颜色强度（从而使其可见！）。

The problem appears to occur when points are drawn outside of the visible map boundary. 当在可见地图边界之外绘制点时，似乎会出现此问题。 I deduced this by debugging: 我通过调试推断出：

heatmap.setDataSet(testData);

(uncomment "debugger;" in the fiddle to debug the code in the web console) （取消注释“调试器;”在小提琴中调试Web控制台中的代码）

The code within heatmap-gmaps.js which is causing the datapoints to not be rendered is here: 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});
}

It appears that none of the datapoints in your example are contained within the current bounds of the rendered map area. 看来，示例中的数据点都不包含在渲染的地图区域的当前边界内。 Hence "!currentBounds.contains(latlng)" is always true, causing no points to be added to the mapdata object. 因此“！currentBounds.contains（latlng）”始终为true，导致没有点添加到mapdata对象。

This assumption seems to be true because the first point in your dataSet (ie lat: 33.5363, lng:-117.044) is in fact in San Diego (use this to confirm http://itouchmap.com/latlong.html ), which is not visible on the rendered map. 这个假设似乎是正确的，因为你的dataSet中的第一个点（即lat：33.5363，lng：-117.044）实际上是在圣地亚哥（用这个来确认http://itouchmap.com/latlong.html ），这是在渲染的地图上不可见。

Heatmap.js无法渲染

问题描述

1 个解决方案

解决方案1
13 已采纳 2013-12-11 00:24:51

Update 更新

Original Answer 原始答案

Heatmap.js无法渲染

问题描述

1 个解决方案

解决方案1 13 已采纳 2013-12-11 00:24:51

Update 更新

Original Answer 原始答案

解决方案1
13 已采纳 2013-12-11 00:24:51