Question

我的网页上有热图。它工作正常，但我必须刷新整个页面以获得新的值。

我现在正在改变它，每5秒获取一次值并绘制新值。

也工作正常。但是我认为新的价值被涂在旧的上面，因为我每5秒钟就有一个更亮的噪点。

如何删除绘制的值并绘制新值？

function initialize() {
    mapOptions = {
      zoom: 16,
      center: new google.maps.LatLng(lat, lon),
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
    initValues();
  }

  function initValues(){
    pointArray = new google.maps.MVCArray(taxiData);

    heatmap = new google.maps.visualization.HeatmapLayer({
      data: pointArray
    });
        heatmap.setOptions({radius: 40});
    heatmap.setMap(map);
  }

在taxiData中，每次调用initValues函数时都会有更新的值。我调用一次初始化，然后每5秒钟更新一次taxiData并调用initValues。

Answer 1

对于其他寻找此项目的人，我发现以下情况有效。

首先将变量声明为一个包含热图MVCObject的全局变量。

var mvcObj;

然后，在用于添加热图的功能

中

if( typeof( mvcObj )=='object' ) mvcObj.clear();
/* locations is an array of latlngs */
mvcObj = new google.maps.MVCArray( locations );

/* this.map is a reference to the map object */
var heatmap = new google.maps.visualization.HeatmapLayer({
    data: mvcObj,
    map: this.map
});

Answer 2

这应该有效（在添加新热图之前隐藏旧热图）：

function initialize() {
    mapOptions = {
      zoom: 16,
      center: new google.maps.LatLng(lat, lon),
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
    initValues();
  }

  function initValues(){
    pointArray = new google.maps.MVCArray(taxiData);
    if (!!heatmap && !!heatmap.setMap)
      heatmap.setMap(null);
    heatmap = new google.maps.visualization.HeatmapLayer({
      data: pointArray
    });
    heatmap.setOptions({radius: 40});
    heatmap.setMap(map);
  }

删除热图以进行刷新

2 个答案: