业务需求：将热图引入页面中，做成一个可引入的框架，使用于所有页面。代码如下。

！DOCTYPE html html head meta charset=' UTF-8 '标题/标题样式。热图{宽度：1900像素高度height:1900px}/style脚本src=' http : js/热图。量滴js '/script script src=' http : js/jquery。js '/script/head dyinput id=XXX type=hidden value=' ' input id=yyyy type=hidden value=' ' input id=' array ' type=' button ' value='点击查看数组内容onclick=' getindex()'/div class=' demo-wrapper ' div class=' heat map ' style=' position : relative；div mg src=' http : image/1。jpg '/div/div/div/body脚本src=' http : js/热图。量滴js '/脚本脚本！- heapmap热力图-var heat mapinstance=h337。创建({ container :文档。queryselector ').热图'),半径： 50 });document.querySelector(' .演示包装器)。onmousemove=function(ev){ heat map instance。adddata({ x : ev。layerx，y: ev.layerY，值： { 1 })；};-鼠标点击-var pointx=new Array()；var pointy=new Array()；var I=0；//数组下标函数MouseMoVE(Ev){ Ev=Ev | | window。事件；var MousePoS=MouseCoords(ev)；document.getElementById('xxx ').value=MousePoS . x pointx[I]=document。getelementbyid(' XXX ').价值；//x坐标值写入数组控制台。日志(' x : '文档。getelementbyid(' XXX ').值);document.getElementById('yyy ').value=MousePoS . ypointy[I]=document。getelementbyid(' yyy ').价值；//y坐标值写入数组控制台。日志(' y : '文档。getelementbyid(' yyy ').值);//执行完之后数组下标加一我；控制台。日志(一)；//打印下标}函数MouseCoords(ev){ if(ev。PageX | | ev。PageY){ return { x : ev。PageX，y : ev。PageY }；}返回{ x : ev。clientx文档。尸体。向左滚动文档。尸体。客户左侧，y : ev。客户文件。尸体。滚动顶部文档。尸体。客户端top }；}文档。onmousemove=Mousemove$(function(){ var s=' '；s=窗口。屏幕。高度为“*”的窗口。屏幕。宽度；console.log('当前屏幕分辨率是：s)；-动态改变差异宽高- $('.热图')。宽度($(“正文”).width())；$('.热图')。高度($(“正文”).高度());});/script/html需要引入的射流研究…在https://github.com/pa7/heatmap.js获取。

某视频剪辑软件中使用heatmapjs

百度地图怎么使用就不说了，主要讲讲这个热图，直接贴代码了，注释挺详细的

//vue组件中data(){ return { heat map overlay : ' ' } }，mounted() { //引用heatmap.js //你也可以在index.html中直接插个脚本类型=' text/JavaScript ' src=' http :http://API。地图。百度。com/library/热图/2.0/src/热图_ min。js '/script让script=document。create element(' script ')；剧本。type=' text/JavaScript '；剧本。src=' http://API。地图。百度。com/library/热图/2.0/src/热图_ min。js '；document.body.appendChild(脚本);//创建地图，这个写自己的创建地图方法，请确认你的地图能加载出来这个。creat map()；//一定要先让地图加载出来才加载热力图，我这里做演示直接写个定时器了setTimeout(()={ this。getHeatmap()}，2000) }，methods:{ getHeatmap() { //请求雷达数据，雷达数据需要液化天然气，稍后，计数三种数据这个$http .' get('./././static/radar20.json ').然后(RES={ if(RES . data。代码==' success '){控制台。日志('获取雷达成功');var大数据=RES . data。数据；//关键是下面的三行//其中地图是新的BMap .地图()创建的地图实例，其他的热力图属性（半径，不透明度这种)可以在百度地图接口实例中调试体验，http://磅运。百度。com/jsdemo。htm # C1 _ 15这个。heat mapoverlay=新BMapLib .HeatmapOverlay({ radius: 40，opa city 33600.4 })；地图。addoverlay(这个。heat map overlay)；这个。加热地图覆盖。setdataset({ data :大数据，max : 20 })；} else { console。日志(' err ')；} }) .catch(err={ console。log(err))；});},}效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。