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

How to render heatmap.js on an image?(如何在图像上渲染heatmap.js？)

问题描述

我正在使用heatmap.js覆盖使用GoogleMaps插件的热图。我希望能够下载的图片作为一个图像与热图覆盖。我尝试过heatmapInstance.getDataURL()方法，它只返回覆盖区域，而不返回覆盖区域所在的图像。

div

您需要创建一个在推荐答案和脚本标记内使用的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。

这篇关于如何在图像上渲染heatmap.js？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！