javascript - renderizado - Heatmap.js no está renderizando
quitar el javascript que bloquea el renderizado de contenido wordpress (1)
Estoy intentando integrar heatmap.js con los mapas de Google para hacer un trabajo de visualización. Me referí a esto:
http://www.patrick-wied.at/static/heatmapjs/example-heatmap-googlemaps.html
Como tal, mi código en mi muestra local parece casi idéntico:
<!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>
Estoy obteniendo la representación del mapa de Google en mi div, tal como esperaba, pero el mapa de calor en sí no se procesa en los puntos de datos de larga duración proporcionados por testData.
No hay errores en la consola del navegador ....
¿Alguien ve que estoy haciendo algo tonto aquí?
Actualizar
Como heatmap.js v1 ahora ha sido retired , también he incluido un ejemplo basado en la versión actual, v2, aquí:
http://jsfiddle.net/Fresh/pz4usuLe/
Esto se basa en el ejemplo de Google Maps que se encuentra en el sitio web de mapa de calor .
Respuesta original
Miré esto y es definitivamente confuso. Tomé tu código y lo hice funcionar aquí:
http://jsfiddle.net/Fresh/nRQbd/
(Tenga en cuenta que el ejemplo original anterior ya no funciona, ya que v1 se ha retirado; para ver cómo funciona con v2, consulte este http://jsfiddle.net/Fresh/pz4usuLe/ )
Observe cómo modifiqué los puntos de datos dentro de testData para obtener un resultado dibujado en el mapa:
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
}]
};
También aumenté el valor de conteo para cada uno de estos puntos; un valor de punto de 1 no es visible, pero aumentar su valor (por ejemplo, a 100) aumenta la intensidad del color del punto renderizado (¡por lo tanto, lo hace visible!).
El problema parece ocurrir cuando los puntos se dibujan fuera del límite del mapa visible. Lo deduje al depurar:
heatmap.setDataSet(testData);
(elimine el comentario de "depurador" en el violín para depurar el código en la consola web)
El código dentro de heatmap-gmaps.js que está causando que los puntos de datos no se representen está aquí:
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});
}
Parece que ninguno de los puntos de datos en su ejemplo está contenido dentro de los límites actuales del área del mapa renderizado. Por lo tanto, "! CurrentBounds.contains (latlng)" siempre es verdadero, lo que hace que no se agreguen puntos al objeto mapdata.
Esta suposición parece ser cierta porque el primer punto en su conjunto de datos (es decir, lat: 33.5363, lng: -117.044) está de hecho en San Diego (use esto para confirmar http://itouchmap.com/latlong.html ), que es no visible en el mapa renderizado.