如何在图像上渲染heatmap.js？

Question

我正在使用heatmap.js使用GoogleMaps插件覆盖热图.我希望能够将图片作为图像与热图叠加一起下载.我尝试了方法heatmapInstance.getDataURL()只返回覆盖区域,而不是与覆盖它的图像一起.

Answer 1

您需要创建一个在 div 和 script 标签中使用的 id

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

如您所见，我通过 id 'heatmap' 获得了元素。因此，在您想要将图片放置在页面上的 div 内，只需调用 id 'heatmap'

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

然后只需使用 css 将图像放置在热图下

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

我对 css、html 和 javascript 使用了相同的 id。