JavaScript 热力图参考错误 h337.create。

Question

我正在修改一个来自GitHub的现有项目，该项目使用heatmap.js从“反恐精英：全球攻势”的游戏匹配中生成热图。原始开发人员似乎没有完成代码的这一部分或者存在错误。Firebug控制台只显示以下错误：

ReferenceError: h337 is not defined
var heatmap = h337.create(

这似乎是有问题的那一行代码：https://github.com/deStrO/eBot-CSGO-Web/blob/master/apps/backend/modules/matchs/templates/_stats_heatmap.php#L26 我认为这里可能有打字错误/错误，在花费数小时尝试查找后，我无法找到它。

我使用Chrome（v46.0.2490.80）、Firefox（v41.0.2）尝试生成热力图，但没有任何反应，唯一记录的错误是TypeError，这是我所能依据的全部信息。

您有什么提示/提示可以导致这种情况吗？我一直在Google/Search Stackoverflow寻找类似问题，但没有成功，我认为我正在忽视一些简单的东西。

- dusz

---

你尝试过将 var heatmap = h337.create(... 替换为 var heatmap = new HeatmapOverlay( 吗？这是我的解决方案。 - Sapikelio

这个库是否已经加载？ - Alex

@Alex 我觉得你可能有所发现.. - dusz

@dusz 你在使用Windows XP吗？ - Sapikelio

@Sapikelio 我尝试将 window.onload = function() { 替换为 $(document).ready(function() {，但控制台仍然显示相同的错误。 - dusz

Answer 1

修改这一行

var heatmap = h337.create(

to

var heatmap = window.h337.create(

更新:

好的，你很幸运我找到了错误，你需要将"container"属性传递给热力图选项：

    heatmap = window.h337.create(
    {
        "container": document.getElementById("heatmapArea"),
        "element": document.getElementById("heatmapArea"),
        "radius" : 11,
        "opacity": 40,
        "visible": true,
        "gradient" : { 0.45: "rgb(0,0,255)", 0.55: "rgb(0,255,255)", 0.65: "rgb(0,255,0)", 0.95: "yellow", 1: "rgb(255,0,0)"}
    })

对我来说，这个有效 :)

- john Smith

---

似乎也不起作用，尝试刷新并检查。如果您查看页面源代码，可以看到库已加载。http://46.166.176.229/eBot-CSGO/matchs/view/14#heatmap - dusz

如果您在控制台中输入window.h337，则它已经设置并正常工作。 - john Smith

嘿@johnsmith，我回家后会检查，我在开会。我更新了代码，我认为它反映了你现在写的内容，但是初始测试不起作用。可能是我错过了什么，因为我现在只是在回家之前测试了一下。你使用window.onload = function(){方法还是$(document).ready(function(){方法？ - dusz

Answer 2

TL;DR

在出现此错误的页面上禁用uBlock Origin（或可能是其他Firefox附加组件）。

答案： 我在Firefox中遇到了这个问题，但在Chrome中没有。在Chrome中，一切都按预期工作，所以我开始怀疑我的Firefox附加组件。我禁用了所有内容，并发现地图现在在Firefox中可以正常工作。仔细重新启用所有附加组件后，我发现uBlock Origin附加组件正在干扰javascript。在Firefox中加载的页面上简单禁用uBlock Origin就足以使脚本正常运行。

- Joel Harris

Answer 3

我曾经有一些非常类似的代码，因为我使用window.onload来加载地图，但是在我的body标签中也有一个不同的onload函数，它是空的。在某个时候，浏览器似乎从忽略空的body标签转变为禁用/覆盖window.onload。由于没有错误，这很难追踪。

- Soma Holiday