Wie man heatmap.js auf ein Bild rendert?

Question

Ich verwende heatmap.js, um eine Heatmap mit dem GoogleMaps-Plugin zu überlagern. Ich möchte das Bild als Bild zusammen mit dem Heatmap-Overlay herunterladen können. Ich habe versucht, die Methode hemetmapInstance.getDataURL() gibt nur die Overlay-Region und nicht zusammen mit dem Bild, auf dem es überlagert ist.

Answer 1

Sie benötigen eine ID zu erstellen, die innerhalb des div und Script-Tags verwendet wird

var heatmapInstance = h337.create({ 
    container: document.getElementById('heatMap') 
}); 

Wie man sehen kann ich das Element von id ‚Heatmap‘ bekam. So Innere Ihres div wo Sie das Bild auf der Seite platzieren möchten rufen Sie die id ‚Heatmap‘

<div id='heatMap'></div> 

Dann einfach ein Bild unter dem Heatmap platzieren, indem Sie mit CSS

#heatMap { 
    background-image: url(HinckleyTown.jpg); 
    height: 445px; 
    width: 840px; 
} 

verwendete ich die Gleiche ID für CSS, HTML und Javascript.