Google 当数组中的坐标相同时，地图热图在图块上返回 404

Question

我在使用 Google Maps JS API 3.

时遇到奇怪的错误

我正在根据坐标数组生成热图。有时在过滤数组的结果时，结果列表包含在数组中重复多次的相同坐标（X 个案例出现在相同的坐标中）。

发生这种情况时，地图将无法正确呈现，我会得到相应图块的 404 错误数组，如下所示：

如果我触摸地图放大或缩小，它会正确呈现。 只有坐标相同时才会发生这种情况，如果数组中有 2 个不同的位置，它将被正确渲染。

这是呈现我的地图的代码：

$scope.renderHeatMap = function() {
  $timeout( function(){
    $scope.outbreakfin = [];
      for (var i in $scope.resultsheat) {
        $scope.outbreakfin.push(new google.maps.LatLng($scope.resultsheat[i][0], $scope.resultsheat[i][1]));
    };
    console.log($scope.outbreakfin);

    var map, heatmap;

    map = new google.maps.Map(document.getElementById('heatmap'), {
      mapTypeId: 'satellite'
    });

    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < $scope.outbreakfin.length; i++) {
      bounds.extend($scope.outbreakfin[i]);
    }
    map.fitBounds(bounds);

    var center = map.getCenter();
    google.maps.event.trigger(map, 'resize');

    var options = {
      imagePath: 'images/m',
      gridSize:5
    };

    map.setCenter(center);

    heatmap = new google.maps.visualization.HeatmapLayer({
      data: $scope.outbreakfin,
      map: map
    });

    heatmap.set('radius', heatmap.get('radius') ? null : 15);
    heatmap.set('opacity', heatmap.get('opacity') ? null : 0.7);
    heatmap.set('dissipating', heatmap.get('dissipating') ? null : true);
    heatmap.set('maxIntensity', heatmap.get('maxIntensity') ? null : 15);

  }, 0 );
};

有人知道我可以尝试什么吗？

Answer 1

所以，对于任何未来围绕这个问题的漫游者，我已经弄明白了。

问题出在 map.fitBounds(bounds); 调用周围。 如果所有坐标都相同，fitBounds 很可能会尝试显示设置非常高的缩放级别，这会触发 404 错误。

为了解决这个问题，我找到了一种在设置 fitBounds 后 重置缩放级别的方法。

看起来像这样：

var bounds = new google.maps.LatLngBounds();

for (var i = 0; i < $scope.outbreakfin.length; i++) {
      bounds.extend($scope.outbreakfin[i]);
}
map.fitBounds(bounds);

var listener = google.maps.event.addListener(map, "idle", function() { 
  if (map.getZoom() > 18) map.setZoom(18); 
  google.maps.event.removeListener(listener); 
});