Javascript 引导选项卡中未加载角度谷歌地图

引导选项卡中未加载角度谷歌地图

但是，如果我最小化窗口，谷歌地图将完美加载

在我的控制器中

var app = angular.module('mymap', ['uiGmapgoogle-maps', 'ngAnimate', 'ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
    $scope.fullmap = {
            center: {latitude: 67, longitude: -55},
            zoom: 8,
            id: 9345,
            events: {
                tilesloaded: function (map) {
                    $scope.$apply(function () {
                        google.maps.event.trigger(map, "resize");
                    });
                }
            }
    }
});

HTML文件

 <uib-tabset>
    <uib-tab heading="FEATURED" active=true >
        <br><br>
    </uib-tab> 
    <uib-tab heading="RECENTLY USED">
        <br><br>
        RECENTLY USED  
    </uib-tab>
    <uib-tab heading="TOP RATED" >
        <br><br>
        TOP RATED
    </uib-tab>
    <uib-tab heading="NEAR ME" ng-click="loadmap()">
        <br><br>
        <div class="single-map-view" id="mapview">
          <ui-gmap-google-map center='fullmap.center' zoom='fullmap.zoom' refresh="true">
            <ui-gmap-marker idkey="fullmap.id" coords="fullmap.center" events="fullmap.events"></ui-gmap-marker>
          </ui-gmap-google-map>
        </div>
    </uib-tab>
</uib-tabset>

最近使用



一流的

演示：

有人知道为什么会这样吗

提前谢谢

看看它是否有助于您：

编辑1

angular.module（'myApp'，['directives']）；
函数MyMapCtrl（$scope）{
$scope.selected='first'；//尝试在此处放置'second'
}
角度.module（'directives'，[]）.directive（'map'，function（）{
返回{
限制：'E'，
替换：正确，
模板：“”，
链接：函数（$scope，element，attrs）{
var center=newgoogle.maps.LatLng（50.1,14.4）；
变量映射_选项={
缩放：14，
中心:中心,，
mapTypeId:google.maps.mapTypeId.SATELLITE
};
//创建地图
var map=new google.maps.map（document.getElementById（attrs.id），map\u选项）；
//配置标记
变量标记_选项={
地图：地图，
位置：中
};
//创建标记
var marker=new google.maps.marker（marker\u选项）；
$scope.$watch（'selected'，function（）{
setTimeout（函数（）{
google.maps.event.trigger（映射，'resize'）；
},100);
});
}
}
});
正文{
填充：10px；
}
#地图画布{
保证金：0；
填充：0；
高度：400px；
边框：1px实心#ccc；
}
.标签{
高度：35px；
保证金：0；
宽度：100%；
}
.标签{
背景色：#e4；
光标：指针；
浮动：左；
字体大小：12px；
右边距：10px；
填充：10px 0 10px；
文本对齐：居中；
宽度：85px；
线高：15px；
}
.选定{
背景颜色：银色；
}
.tab_内容{
背景颜色：银色；
高度：400px；
}
p{
填充：10px；
}


第一
第二
这里有一些内容

首先，这个问题是由引导选项卡和谷歌地图之间的冲突引起的。
解决方法是将包含地图的选项卡实际放置在
ui选项卡集
之外，并在用户单击相应选项卡时显示/隐藏它

    <uib-tabset>
    <uib-tab ng-click="hideMap()" heading="FEATURED" active=true >
        <br><br>
    </uib-tab> 
    <uib-tab ng-click="hideMap()" heading="RECENTLY USED">
        <br><br>
        RECENTLY USED  
    </uib-tab>
    <uib-tab ng-click="hideMap()" heading="TOP RATED" >
        <br><br>
        TOP RATED
    </uib-tab>
    <uib-tab heading="NEAR ME" ng-click="showMap()">

    </uib-tab>
</uib-tabset>
<div ng-if="isMapShown">
<br><br>
        <div class="single-map-view" id="mapview">
          <ui-gmap-google-map center='fullmap.center' zoom='fullmap.zoom' refresh="true">
            <ui-gmap-marker idkey="fullmap.id" coords="fullmap.center" events="fullmap.events"></ui-gmap-marker>
          </ui-gmap-google-map>
        </div>
</div>

谢谢你的回答，但我在这里用html显示地图，我还需要动态更改纬度和经度。我在html页面中添加了modelsbyref=“false”dorebuildall=“true”，但不是working@JensonRaby尝试将我的代码与您的代码进行比较，或者使用我在示例中提到的选项卡
app.controller('MainCtrl', function($scope) {

     $scope.hideMap = hideMap;
     $scope.showMap = showMap;
     $scope.isMapShown = false;

     function hideMap() {
       $scope.isMapShown = false;
     }
     function showMap() {
       $scope.isMapShown = true;
     }
});