关键词：
【中文标题】Heatmap.js 不渲染【英文标题】：Heatmap.js not rendering 【发布时间】：2013-12-21 10:48:15 【问题描述】：我正在尝试将 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 提供的经纬度数据点上渲染。
浏览器控制台中没有错误......
有人看到我在这里做了一些愚蠢的事情吗？
【问题讨论】：
我最好的猜测是我错过了上面的内容，或者 API 发生了一些微妙的变化，并且 Heatmap.js 没有保持最新。作者没有回复我的问题，这里也没有任何东西，所以我想我会寻找另一个解决方案：/ 你试过HeatmapLayer in the visualization library吗？ 【参考方案1】：更新
由于 heatmap.js v1 现在是retired，我还在这里包含了一个基于当前版本 v2 的示例：
http://jsfiddle.net/Fresh/pz4usuLe/
这是基于Google Maps example found on the heatmap website。
原答案
我看了这个，这绝对是令人困惑的。我拿走了你的代码，让它在这里工作：
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);
(取消注释 "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.contains(latlng)" 始终为真，不会向 mapdata 对象添加任何点。
这个假设似乎是正确的，因为您的数据集中的第一个点（即纬度：33.5363，lng:-117.044）实际上在圣地亚哥（使用它来确认http://itouchmap.com/latlong.html），这在渲染中不可见地图。
【讨论】：
您所做的另一件事是将计数从 1 更改为 100，这也是必需的。 @geocodezip 是的，好点。我将更新我的答案以突出显示该更改。 真棒故障。我有点松了一口气，问题并不完全在于我尝试使用该库。有了你上面的建议，我应该能够整合它并继续前进。谢谢！ 引用的 jsfiddle 似乎不再有效。 感谢您告诉我@SomaHoliday，我会在这个前夜看看。如何为heatmap.js添加点击事件
...染。h337.create()创建对象，使用containter：指定容器，生成heatmapformat数据data，使用setData（）函数设置数据。实例一：代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><style>divwidth:600px;hei... 查看详情
heatmap.jsv2.0–最强大的web动态热图
Heatmap是用来呈现一定区域内的统计度量，最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。Heatmap.js这个 JavaScript 库可以实现各种动态热力图的网页，帮助您研究和可... 查看详情
heatmap.js参数说明
blur：每个点都是两个圆组成的，分别为内圆和外圆；外圆越大，看起来这个点越模糊，内圆部分比较清晰；外圆的颜色比较固定且与内圆颜色不同，内圆的颜色由value确定；blur决定外圆与内圆的占比大小，值为0-1；值越大，外... 查看详情
如何使用 heatmap.js 保存由 canvas 标签生成的图像文件？
】如何使用heatmap.js保存由canvas标签生成的图像文件？【英文标题】：HowIcansavetheimagefilegeneratedbycanvastagwithheatmap.js?【发布时间】：2012-08-1802:14:02【问题描述】：如何将生成的画布heatmap.js保存为图像？我一直在用toDataURL()进行测试... 查看详情
leaflet+esri-leaflet+heatmap实现热力图
1.环境准备 1）下载leaflet.js插件, 官网传送:http://leafletjs.com/ 2）下载esri-leaflet.js插件, 官网传送:http://esri.github.io/esri-leaflet/ 3）下载heatmap.js插件, 官网传送:https://www.p 查看详情
304arcgis_for_js热力图4.21(03)
参考技术A1，使用FeatureLayer创建热力图目前HeatmapRenderer还不支持在SceneViews中使用，只能在二维点图层中使用利用开源heatmap结合arcgisapiforjs实现自定义HeatmapLayer类，继承DynamicMapServiceLayer，然后结合heatmap.js一起这个之前在3.X中用过... 查看详情
Twitter嵌入不渲染反应本机渲染html
】Twitter嵌入不渲染反应本机渲染html【英文标题】：Twitterembeddnotrenderingreactnativerenderhtml【发布时间】：2021-06-0223:14:38【问题描述】：我正在使用react-native-render-html@foundry<HTMLcontentWidth=Dimensions.get(\'screen\').widthonLinkPress=(e,href)=& 查看详情
3dmax只渲染反射不渲染物体
...：一个平面上面放一个球体，我给地面贴了反射Raytrace，渲染的时候我只想渲染地面的反射效果，不想让地面也渲染出来，请问该如何设置呢？可是我的一个朋友说maya可以办到？真的吗？max不行吗？渲染面板-renderelements面板-添... 查看详情
JSF2 - 为啥渲染响应不重新渲染组件设置？
】JSF2-为啥渲染响应不重新渲染组件设置？【英文标题】：JSF2-Whydoesrenderresponsenotrerendercomponentsetting?JSF2-为什么渲染响应不重新渲染组件设置？【发布时间】：2011-03-0101:06:05【问题描述】：我遇到以下问题：在我的视图恢复后，... 查看详情
Livewire 不重新渲染
】Livewire不重新渲染【英文标题】：LivewireNotRerendering【发布时间】：2021-01-2721:22:52【问题描述】：我不知道我错过了什么，但我遵循了每一步，但它没有重新渲染视图。这是我的livewire组件类：useLivewire\\Component;classHelloWorldextendsC... 查看详情
为啥这个子组件不重新渲染？
】为啥这个子组件不重新渲染？【英文标题】：Whydoesn\'tthischildcomponentrerender?为什么这个子组件不重新渲染？【发布时间】：2017-07-1215:25:55【问题描述】：我正在尝试使用ReactJS，并试图了解如何触发子组件渲染。在ReactJS中，如... 查看详情
如何在 REACT 17.0 的渲染方法中不渲染具体组件
】如何在REACT17.0的渲染方法中不渲染具体组件【英文标题】：HowtonotrenderconcretecomponentsinrendermethodinREACT17.0【发布时间】：2021-05-1016:39:43【问题描述】：在我的组件的渲染方法中，我创建了十几个其他组件的实例，其中一些组件（... 查看详情
为啥我的3dmax渲染不出来阴影？
视图中可以看见阴影可是渲染不出来是因为什么？3dmax渲染不出灯光阴影的处理方法：1、灯光面板的阴影启用没有勾选灯光面板的阴影启用没有勾选是最常见的3dmax渲染不出阴影的原因，如果只是单个灯光或数个灯光没有阴影的... 查看详情
Ruby on Rails 4 渲染部分不渲染
】RubyonRails4渲染部分不渲染【英文标题】：RubyonRails4renderpartialdoesnotrender【发布时间】：2017-05-0714:49:25【问题描述】：我尝试将旧的Rails2.X网页升级到Rails4已经几个月了。我仍在为一些部分渲染视图而苦苦挣扎。所以我想我可以... 查看详情
为啥 Vue 渲染组件不正确？
】为啥Vue渲染组件不正确？【英文标题】：WhydoesVuerendercomponentincorrectly?为什么Vue渲染组件不正确？【发布时间】：2021-05-2808:22:33【问题描述】：以下是错误示例。重现问题：添加3项并删除第二项。里面的所有东西都被正确删除... 查看详情
在 componentDidMount 之后反应不渲染组件
】在componentDidMount之后反应不渲染组件【英文标题】：ReactnotrenderingcomponentaftercomponentDidMount【发布时间】：2020-10-2719:21:43【问题描述】：我有一个组件，它在componentDidMount之后没有重新渲染。渲染方法是这样的：render()console.log("--... 查看详情
如何在不实际渲染网页的情况下渲染 404？
】如何在不实际渲染网页的情况下渲染404？【英文标题】：HowdoIrendera404withoutactuallyrenderingmywebpage?【发布时间】：2018-09-1902:12:34【问题描述】：我想在我的Rails5.1应用程序中以特定条件呈现默认的404页面。我的控制器里有这个defin... 查看详情
getComponent 不渲染组件
】getComponent不渲染组件【英文标题】：getComponentdoesn\'trendercomponent【发布时间】：2017-03-1316:00:53【问题描述】：我尝试使用react-router和webpack设置dynamicrouting。require.ensure函数加载模块，但getComponent方法不渲染组件。在我的示例中... 查看详情