ui-bootstrap 选项卡中的 Mapbox 地图未加载图块

Question

我正在尝试将 mapbox 地图放入 angular-ui-bootstrap 选项卡中，似乎 some/most 的图块没有得到在初始化时加载，并且在您在地图上平移时不会被请求。在 ui-bootstrap 标签集之外，地图工作得很好。

没有抛出任何错误，但查看对图块的请求，其中许多只是出于某种原因未被请求。我什至不确定如何调试这个。

关于可能发生的事情有什么想法吗？

这是一个示例 angular 应用程序，它将显示问题

var app = angular.module('app', ['ui.bootstrap'])
app.controller('mapCtrl', ['$scope', '$timeout', function($scope, $timeout) {
  $scope.val = 123
}]);
app.directive('myMap', function() {
    return {
      restrict: 'E',
      template: "<div id='map_container'></div>", 
      link: function ($scope, elem, attrs) {
        mapDiv = elem.find('#map_container')
        L.mapbox.accessToken = 'pk.eyJ1IjoicmVwdGlsaWN1cyIsImEiOiJlSWZtN1hZIn0.FfT3RxbfRYv4LIjBxXG5fw';
        var map = L.mapbox.map(mapDiv[0], 'examples.map-i86nkdio')
          .setView([40, -74.50], 9);
      }
    };
  });

Answer 1

地图在地图容器不可见时被初始化，这就是它失败的原因。您在调用 invalidateSize 的正确路径上，但您需要在选项卡可见时执行此操作。我看到你已经设置了一个事件，你可以在你的指令 link 函数中挂钩它：

$scope.$on('tabSelect:map', function (t) {
    $timeout(function () {
        map.invalidateSize(true);
    });
});

没有超时是不行的。它需要某种延迟，以便选项卡在触发 invalidateSize 之前完全可见。这是一个更新的 Plunker：http://plnkr.co/edit/gzwx2pZ1GjBZDE8Utxfl?p=preview

ui-bootstrap 选项卡中的 Mapbox 地图未加载图块

Mapbox map in ui-bootstrap tab not loading tiles

angularjs

mapbox

angular-ui-bootstrap