Heatmap.js無法渲染

Question

我正在嘗試將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提供的lat-long數據點上呈現。

瀏覽器控制台中沒有錯誤....

有人看到我在做傻事嗎？

Answer 1

更新

由於heatmap.js v1現已退役，我還提供了一個基於當前版本v2的示例：

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

這是基於熱圖網站上的Google Maps示例。

原始答案

我看着這個，這絕對令人困惑。 我拿了你的代碼並讓它在這里工作：

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

（取消注釋“調試器;”在小提琴中調試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）”始終為true，導致沒有點添加到mapdata對象。

這個假設似乎是正確的，因為你的dataSet中的第一個點（即lat：33.5363，lng：-117.044）實際上是在聖地亞哥（用這個來確認http://itouchmap.com/latlong.html ），這是在渲染的地圖上不可見。

Heatmap.js無法渲染

問題描述

1 個解決方案

解決方案1
13 已采納 2013-12-11 00:24:51

更新

原始答案

Heatmap.js無法渲染

問題描述

1 個解決方案

解決方案1 13 已采納 2013-12-11 00:24:51

更新

原始答案

解決方案1
13 已采納 2013-12-11 00:24:51