Bản đồ nhiệt Javascript Tham khảoMỗi h337.create

Question

Tôi đang sửa đổi dự án hiện tại từ github sử dụng heatmap.js để tạo bản đồ nhiệt từ trận đấu trong trò chơi "Counter-Strike: Global Offensive", nhà phát triển ban đầu dường như không hoàn thành một phần của mã hoặc nó có lỗi trong đó. Các Firebug console nói này như là lỗi chỉ:

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

Đây là dòng mà có vẻ như để đổ lỗi: https://github.com/deStrO/eBot-CSGO-Web/blob/master/apps/backend/modules/matchs/templates/_stats_heatmap.php#L26

Tôi nghĩ rằng có một lỗi đánh máy/lỗi ở đâu đó ở đây, sau khi trải qua giờ cố gắng để xác định vị trí nó Tôi không thể làm như vậy.

Tôi đã thử tạo bản đồ nhiệt bằng cả Chrome (v46.0.2490.80), Firefox (v41.0.2) tuy nhiên không có gì xảy ra và lỗi duy nhất được ghi lại là lỗi TypeError, tất cả những gì tôi phải làm sau.

Bất kỳ mẹo/gợi ý nào về điều gì có thể gây ra điều này? Tôi đã được googling/tìm kiếm stackoverflow cho các vấn đề tương tự mà không thành công, tôi nghĩ rằng có cái gì đó ngớ ngẩn Tôi nhìn ..

Answer 1

thay đổi dòng này

var heatmap = h337.create(

để

var heatmap = window.h337.create(

Cập nhật:

okay bạn may mắn tôi đã tìm thấy lỗi, bạn phải chuyển thuộc tính "vùng chứa" sang tùy chọn bản đồ nhiệt:

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)"} 
    }) 

cho tôi làm việc này :)

Answer 2

TL; DR

Disable uBlock xứ (hoặc có thể một số Firefox khác Add-on) trên các trang đó thể hiện ra lỗi này.

Trả lời: Điều này đã xảy ra với tôi trong Firefox nhưng không xảy ra với Chrome. Trong Chrome, mọi thứ hoạt động như mong đợi, vì vậy tôi bắt đầu nghi ngờ các Tiện ích bổ sung của Firefox. Tôi đã vô hiệu hóa mọi thứ và phát hiện ra rằng các bản đồ hiện đã hoạt động trong Firefox. Sau khi bật lại cẩn thận tất cả Tiện ích bổ sung, tôi phát hiện thấy tiện ích bổ sung nguồn gốc uBlock đã can thiệp vào javascript. Chỉ cần vô hiệu hóa nguồn gốc uBlock trên trang bạn đang tải trong Firefox là đủ để cho phép tập lệnh hoạt động đúng.

Answer 3

Tôi đã có một số mã rất giống với điều này đã phá vỡ vì tôi đã sử dụng window.onload để tải bản đồ nhưng cũng có chức năng tải trọng khác trong thẻ body của tôi trống. Tại một số thời điểm, có vẻ như trình duyệt đã chuyển từ bỏ qua thẻ body trống để làm cho nó vô hiệu hóa/ghi đè lên window.onload. Điều này rất khó để theo dõi vì không có lỗi.