Heatmap.js not rendering
Heatmap.js not rendering
我正在尝试将heatmap.js与谷歌地图集成,以进行一些可视化工作。我指的是:
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数据点上渲染。
浏览器控制台中没有错误。。。。
有人看到我在这里做傻事吗?
更新
由于heatmap.js v1现在已经退役,我还包含了一个基于当前版本v2的示例:
http://jsfiddle.net/Fresh/pz4usuLe/
这是基于热图网站上的谷歌地图示例。
原始答案
我看了看这个,肯定很困惑。我拿走了你的代码,让它在这里工作:
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);
(在fiddle中取消注释"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.contents(latlng)"始终为true,导致不会向mapdata对象添加任何点。
这个假设似乎是正确的,因为数据集中的第一个点(即纬度:33.5363,lng:-117.044)实际上在圣地亚哥(用这个来确认http://itouchmap.com/latlong.html),在渲染贴图上不可见。
- jQuery is not loaded
- AngularJS JSON not arriving php
- $rootScope not working
- reactRedux is not defined
- jQuery document.ready not working
- Javascript/Jquery Blob not showing Chrome PDF
- ReferenceError: not defined
- ReferenceError: cordova is not defined @ng-cordova.min.js:7
- Heatmap.js not rendering
- Res.render() not rendering
- AngularJS ui.router not rendering view [Node.js]
- jQuery FullCalendar not rendering
- Phantomjs *.png img not rendering
- React-Motion: Not Rendering TransitionSpring
- Webpack, React & Babel, not rendering DOM
- Knockout not rendering
- PHP/AJAX not rendering javascript
- Marionette LayoutView not rendering
- YUI3 Plugin.base not rendering
- Playground.js Not Rendering