NgMap与Google Maps热力图异步数据加载问题排查

我帮你排查了代码里的几个关键问题，这应该就是导致报错和动态更新失效的根源：

核心问题分析 #

你遇到的两个核心问题：

1. HTML中heatmap-layer的data绑定指向的变量不存在于$scope中，NgMap指令无法找到有效数据源，因此抛出invalid heatmap data错误。
2. 你在代码中重新创建了HeatmapLayer实例，没有复用NgMap指令已经初始化好的图层，同时也没做好动态数据更新的准备。

分步解决方案 #

1. 修正HTML绑定与图层引用 #

先修改HTML，去掉data属性（我们在控制器里动态赋值，避免绑定无效变量）：

<ng-map center="21.088513,92.197204" zoom="16" map-type-id="SATELLITE">
  <heatmap-layer id="foo"></heatmap-layer>
</ng-map>

2. 正确初始化热力图数据并支持动态更新 #

Google Maps热力图原生支持MVCArray作为数据源——这种数组的变更会自动同步到热力图上，完美适配动态更新需求。我们将原始坐标转成MVCArray并挂载到$scope上，方便后续修改。

修改后的AngularJS代码：

$scope.outbreak = [ 
  [21.088, 92.19862], [21.08866, 92.19874], 
  [21.08869, 92.19872], [21.08865, 92.19875],
  // ... 你的其他坐标数据
];

// 初始化MVCArray用于热力图数据，支持动态更新
$scope.heatmapData = new google.maps.MVCArray();

$scope.renderHeatMap = function() {
  NgMap.getMap().then(function(map) {
    // 获取NgMap已经初始化好的热力图图层实例
    const heatmap = map.heatmapLayers.foo;
    
    // 把原始坐标转成LatLng对象，批量加入MVCArray
    $scope.outbreak.forEach(coord => {
      $scope.heatmapData.push(new google.maps.LatLng(coord[0], coord[1]));
    });
    
    // 给热力图绑定数据源
    heatmap.setData($scope.heatmapData);
  });
};

// 示例：动态更新热力图的函数
$scope.updateHeatmap = function(newCoords) {
  // 清空现有数据
  $scope.heatmapData.clear();
  // 添加新坐标
  newCoords.forEach(coord => {
    $scope.heatmapData.push(new google.maps.LatLng(coord[0], coord[1]));
  });
  // 无需再次调用setData，MVCArray的变更会自动同步到热力图
};

3. 确保操作时机正确 #

NgMap的getMap()返回Promise确保地图加载完成，但还要保证heatmap-layer实例已经注册。建议在地图初始化完成后再调用渲染函数：

// 页面加载时自动触发热力图渲染
NgMap.getMap().then(() => {
  $scope.renderHeatMap();
});

为什么原来的代码会报错？ #

• HTML里的data="pointArray"绑定的是$scope.pointArray，但你在renderHeatMap里定义的pointArray是局部变量，指令根本无法访问，导致数据源无效。
• 你重新创建了new google.maps.visualization.HeatmapLayer()，覆盖了从map.heatmapLayers.foo获取的NgMap原生实例，这会导致图层冲突，且原图层因无有效数据报错。

修改后，你不仅能解决初始报错，还能通过操作$scope.heatmapData（比如push、clear、removeAt）实现热力图的动态更新，无需重复创建图层。

内容的提问来源于stack exchange，提问作者Eric Mitjans