Question

Angular google map未在引导程序选项卡中加载

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

在我的控制器中

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>

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

任何人都知道为什么会这样？

提前致谢！

Answer 1

看看它是否对您有所帮助：

编辑1

＆＃13;

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);
                
          });
        }
    }
});

＆＃13;

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

＆＃13;

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

＆＃13;

编辑2

添加您的代码： modelsbyref =＆＃34; false＆＃34; dorebuildall =＆＃34;真＆＃34;

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

Answer 2

首先，这个问题是由引导标签和谷歌地图之间的冲突引起的。解决方法是实际将包含地图的标签放在 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;
     }
});

Angular-google-maps未在引导程序选项卡

2 个答案: