角谷歌-地圖在自舉標籤不加載

加載但是，在谷歌地圖將完全加載，如果我在我的控制器最小化窗口

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

任何人有任何想法，爲什麼出現這種情況？

提前致謝！

來源

2015-11-17 Jenson Raby

看看它可以幫助你：

編輯1

angular.module('myApp', ['directives']); 
 

 
function MyMapCtrl ($scope) { 
 
\t $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> 
 
    \t <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"> 
 
    \t <map id="map_canvas"></map> 
 
    </div> 
 
</div>

EDIT 2

添加在你的代碼：modelsbyref = 「假」 dorebuildall =」真「

<!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="[email protected]"></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>

來源

2015-11-17 13:06:47

感謝您的答案，但在這裏我使用http://angular-ui.github.io/angular-google在我的html中顯示地圖的地圖/模塊也需要動態更改經緯度 –

@JensonRaby look edit 2 –

我在html頁面中添加了modelsbyref =「false」dorebuildall =「true」，但它不起作用 –

首先，這個問題是由引導標籤和谷歌地圖之間的衝突引起的。解決方法是實際上將包含地圖的選項卡放置在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; 
    } 
});

來源

2016-05-30 09:18:26

角谷歌-地圖在自舉標籤不加載

回答

相關問題