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

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

本文介绍了如何在图像上渲染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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:如何在图像上渲染heatmap.js?

基础教程推荐