angularjs - 将 ngMap 与 tabset 一起使用 - 只会启动第一个选项卡

Question

只设置了第一个选项卡。

<tabset>
    <tab heading="One"><map center="London"></map></tab>
    <tab heading="Two"><map center="Liverpool"></map></tab>
    <tab heading="Three">Three</tab>
</tabset>

http://plnkr.co/edit/DZj5RkDUHk9C8oTvsjcf?p=preview

一些忠告？

- - - 编辑 - - -

如果使用 angular 1.3.15 和 ui-bootstrap tpls-0.13.3 它只能按下按钮

<button class="btn btn-primary" ng-click="reRednerMap()">reRender</button>

http://plnkr.co/edit/3P4iLTrog1ismFDUQNQe?p=preview

一些忠告？

Answer 1

此解决方案工作正常。

<tabset>
     <tab heading="One" select="reRenderMap()"><map center="London"></map></tab>
     <tab heading="Two" select="reRenderMap()"><map id="liverpool" center="Liverpool"></map></tab>
     <tab heading="Three">Three</tab>
 </tabset>

在控制器中

 $scope.reRenderMap = function() {
            $timeout(function(){
                angular.forEach($scope.maps, function(index) {
                    google.maps.event.trigger(index, 'resize');
                });
            }, 500);
        }

        $scope.maps = [];

        $scope.$on('mapInitialized', function(evt, evtMap) {
              $scope.maps.push(evtMap);
        });

http://plnkr.co/edit/3P4iLTrog1ismFDUQNQe?p=preview

Answer 2

实际上地图已启动，但未正确渲染（地图渲染取决于父容器，而父容器又被隐藏）。因此，您应该通过在标签打开时触发地图调整大小来重新渲染它。

在选择事件上绑定 reRenderFunction。

 <tabset>
     <tab heading="One"><map center="London"></map></tab>
     <tab heading="Two" select="reRednerMap()"><map id="liverpool" center="Liverpool"></map></tab>
     <tab heading="Three">Three</tab>
 </tabset>

修改控制器：

 angular.module('ui.bootstrap.demo', ['ui.bootstrap','ngMap']);
 angular.module('ui.bootstrap.demo').controller('test', function ($scope) {
    $scope.reRednerMap = function() {            
        google.maps.event.trigger(this.map, 'resize');    
    }
 });

http://plnkr.co/edit/s3yPC1ZQE5c8jZoqCmbf?p=preview