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

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

2 个答案: