高德地图热力图插件实现人流量监控，如何实现人流数据实时刷新

Question

需求描述：使用高德地图插件--热力图插件，实现监控数据直观化：地图上呈现人流量变化，以热力图的方式。服务器监控数据每3秒更新，浏览器需要每5秒请求一次获取最新数据并更新用户界面。

代码实现： 定义了一个方法showHeatMap()用来ajax请求服务器监控数据，代码如下：

问题描述 网页打开，成功显示数据，但5秒后没有实时刷新，网页打开一段时间后，页面崩溃。
第一次运行的结果：

崩溃的结果：

调试模式中，每隔5秒有成功打印出请求到的数据。请js大神提供一个开发思路吧，怎么实时刷新这个用户界面，不是刷新整个网页，是重新渲染地图上呈现的结果。高德地图的热力图插件是使用heatmap.js。

Answer 1

showHeatMap();//页面加载时请求数据，渲染用户界面var heatmap;//map为高德地图实例，AMap.Heatmap为高德地图热力图插件map.plugin(["AMap.Heatmap"], function () {    heatmap = new AMap.Heatmap(map, {        radius: 45, //给定半径        opacity: [0, 0.9],        gradient: {            0.2: $.cookie("little") != undefined ? $.cookie("little") : '#4AA329',            0.5: $.cookie("a_little") != undefined ? $.cookie("a_little") : '#1F7B67',            0.7: $.cookie("many") != undefined ? $.cookie("many") : '#A63F00',            0.95: $.cookie("plenty") != undefined ? $.cookie("plenty") : '#9D0019'        }    });});setInterval(showHeatMap,5000);//每隔5秒请求服务器获取最新数据function showHeatMap(){       $.get({           url:"/getdata",           dataType:"json",           success:function(data){             console.log(data);                heatmap.setDataSet({                    data: data,                    min: 10                });               },               error:function(xmlHttpRequest,err,catchError){                   console.log(xmlHttpRequest);                   console.log(err);                   console.log(catchError);                   }           });       }