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

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);

                   }

           });

       }