代码之家 › 专栏 › 技术社区 › Eric Mitjans

当数组中的坐标相同时,Google Maps heatmap返回404

heatmap google-maps-api-3 google-maps angularjs

Eric Mitjans · 技术社区 · 7 年前

我在使用googlemapsjsapi3时遇到了一个奇怪的错误。

我正在生成一个基于坐标数组的热图。在过滤数组结果时,结果列表由数组中重复多次的相同坐标组成(X个情况出现在相同坐标中)。

发生这种情况时,贴图将无法正确渲染,我将为相应的平铺获取404个错误数组,如下所示:

如果我触摸地图缩放或向上或向下,它将正确渲染。只有在坐标相同的情况下才会发生这种情况,如果数组中有两个不同的位置,它将被正确呈现。

下面是呈现我的地图的代码:

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

有人知道我能尝试什么吗?

1 回复 | 直到 7 年前

Eric Mitjans 7 年前

所以,对于任何未来在这个问题上徘徊的人来说,我已经找到了答案。

问题就在 map.fitBounds(bounds); 打电话来。如果所有坐标都相同 fitBounds 将很可能尝试显示设置一个非常高的缩放级别,这将触发404个错误。

为了解决这个问题,我找到了一种重置缩放级别的方法之后这个 Fitbunds公司 准备好了。

看起来是这样的:

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