Heatmap.js не отображается

Я пытаюсь интегрировать heatmap.js с Google maps, чтобы выполнить некоторую работу по визуализации. Я сослался на это:

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

Я получаю рендеринг карты google в своем div, как я ожидаю, но сама тепловая карта не выводит на lat-long точки данных, предоставляемые testData.

В браузере нет ошибок.

Кто-то видит, что я делаю что-то глупое здесь?

Ответы

Ответ 1

Update

Так как heatmap.js v1 теперь удален > Я также включил пример, основанный на текущей версии v2, здесь:

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

Это основано на примере Google Maps, найденном на веб-сайте Heatmap.

Оригинальный ответ

Я посмотрел на это, и это определенно сбивает с толку. Я взял ваш код и получил его для работы здесь:

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

(Обратите внимание, что исходный пример выше не работает, поскольку v1 был удален, чтобы увидеть, как это работает с v2, см. это http://jsfiddle.net/Fresh/pz4usuLe/)

Обратите внимание, как я изменил datapoints в 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);

(uncomment "debugger;" в скрипте для отладки кода в веб-консоли)

Код в файле 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.

Это предположение верно, потому что первая точка вашего набора данных (т.е. lat: 33.5363, lng: -117.044) фактически находится в Сан-Диего (используйте это для подтверждения http://itouchmap.com/latlong.html), который не отображается на отображаемой карте.