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

Question

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

Answer 1

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

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

如您所见，我通过 ID“热图”获取了元素。所以在你想要在页面上放置图片的 div 中，只需调用 id 'heatmap'

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

然后简单地使用css在热图下放置一个图像

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

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