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

Angular-google-maps not loading in bootstrap tab

本文关键字：加载 谷歌地图 选项      更新时间：2023-09-26

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

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

在我的控制器中

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>

演示：http://plnkr.co/edit/q7MdFxZ3Am5hvk1hL2Ja?p=preview

有人知道为什么会发生这种事吗？

提前感谢！

看看它是否对您有帮助：

编辑1

angular.module('myApp', ['directives']);
function MyMapCtrl ($scope) {
	$scope.selected = 'first'; // try to put 'second' here
}
angular.module('directives', []).directive('map', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function($scope, element, attrs) {
            var center = new google.maps.LatLng(50.1, 14.4);
            
            var map_options = {
                zoom: 14,
                center: center,
                mapTypeId: google.maps.MapTypeId.SATELLITE
            };
          
            // create map
            var map = new google.maps.Map(document.getElementById(attrs.id), map_options);
            
            // configure marker
            var marker_options = {
                map: map,
                position: center
            };
            
            // create marker
            var marker = new google.maps.Marker(marker_options);
            
            $scope.$watch('selected', function () {
                                                  window.setTimeout(function(){
                                                      
                    google.maps.event.trigger(map, 'resize');
                                                     },100);
          });
        }
    }
});
body {
  padding: 10px;   
}
#map_canvas {
    margin: 0;
    padding: 0;
    height: 400px;
    border: 1px solid #ccc;
}
.tabs {
    height: 35px;
    margin: 0;
    width: 100%;
}
.tab {
    background-color: #E4E4E4;
    cursor: pointer;
    float: left;
    font-size: 12px;
    margin-right: 10px;
    padding: 10px 0 10px;
    text-align: center;
    width: 85px;
    line-height: 15px;
}
.selected {
    background-color: silver;
}
.tab_content {
    background-color: silver;
    height: 400px;
}
p {
    padding: 10px;
}
    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div ng-app="myApp" ng-controller="MyMapCtrl">
  <div class="tabs">
    <div ng-click="selected = 'first'" ng-class="{'selected': selected == 'first'}" class="tab">first</div>
  	<div ng-click="selected = 'second'" ng-class="{'selected': selected == 'second'}" class="tab">second</div>
   </div>
   
    <div ng-show="selected == 'first'" class="tab_content">
        <p>some content here...</p>
    </div>
    <div ng-show="selected == 'second'" class="tab_content">
    	<map id="map_canvas"></map>
    </div>
</div>

编辑2

添加您的代码：modelsbyref="false"dorebildall="true"

<!DOCTYPE html>
<html ng-app="mymap">
    <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <script>document.write('<base href="' + document.location + '" />');</script>
        <link href="style.css" rel="stylesheet" />
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
        <script data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-require="angular.js@1.4.x"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
        <script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
        <script src="app.js"></script>
    </head>
    <body ng-controller="MainCtrl">
        <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 modelsbyref="false" dorebuildall="true" 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>
    </body>
</html>

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

    <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>

在控制器中，定义显示/隐藏地图功能：

app.controller('MainCtrl', function($scope) {
     $scope.hideMap = hideMap;
     $scope.showMap = showMap;
     $scope.isMapShown = false;
     function hideMap() {
       $scope.isMapShown = false;
     }
     function showMap() {
       $scope.isMapShown = true;
     }
});
相关文章：