ブートストラップタブにロードされていない角度 - Google-Maps -- javascript フィールド と angularjs フィールド と google-maps フィールド 関連 問題

Angular-google-maps not loading in bootstrap tab












1
vote

問題

日本語

角度Googleマップがブートストラップタブにロードされていない

しかし、ウィンドウを最小化した場合、Googleマップは完全にロードされます。

私のコントローラーで

<事前> <コード> 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 :/ plnkr.co/edit/q7mdfxz3am5hvk1hl2ja?p=preview" rel="nofollow"> http://plnkr.co/edit/q7mdfxz3am5hvk1hl2ja ?P =プレビュー

だれでもこれが起こる理由を考えていますか?

事前にありがとう!

英語

Angular google map is not loading in bootstrap tab

but, the google map will load perfectly if i minimizing the window

IN MY CONTROLLER

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 FILE

 <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

Anyone have idea why this happens ?

Thanks in advance !

</div
        

回答リスト

1
 
vote

それがあなたを助けるかどうかを確認してください:

編集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);                              });          }      }  });  
 <コード> datetime0  
 <コード> datetime1  

編集2

コードで追加: movelesbyref = "false" dorebuildall = "true"

<事前> <コード> datetime2
 

See if it helps you:

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

EDIT 2

Add in your code: modelsbyref="false" dorebuildall="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> 
</div
 
 
     
     
0
 
vote

まず、この問題はブートストラップタブとGoogleマップ間の競合が原因です。 これに対する回避策は、実際にマップを含むタブを datetime3 をに配置し、それをユーザーが対応するタブをクリックしたときに表示/非表示にすることです。

<事前> <コード> datetime4

コントローラ内で、マップ機能を表示/非表示にする:

<事前> <コード> datetime5
 

First of all, this problem is caused by a conflict between bootstrap tabs and google maps. A workaround for this is to actually put the tab containing the map outside ui-tabset, and show/hide it when the user clicks on the corresponding tab.

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

In the controller, define the show/hide map functions:

app.controller('MainCtrl', function($scope) {       $scope.hideMap = hideMap;      $scope.showMap = showMap;      $scope.isMapShown = false;       function hideMap() {        $scope.isMapShown = false;      }      function showMap() {        $scope.isMapShown = true;      } }); 
</div
 
 

関連する質問

2  GTK Googleマップとの対話  ( Gtk interaction with google maps ) 
GLKを使用してGTKを使用してGUIアプリケーションを作成しようとしているため、Google Maps APIを使用してマップをダウンロードし、送信元と宛先の間の最短パスを見つけようとしています。 Web Toolkitを使用して、アプリケーションでミニW...

0  Google Maps Flex API:ダブルクリックの両方を処理しますか?  ( Google maps flex api handle both double and single clicks ) 
ダブルクリックから単一のマウスをクリックしてください。私のシングル [リスナー]をクリックすると、ダブルクリックをすべて閉じ込めているようです。 href="http://www.sustainablegis.com/projects/tz/tzmap/">...

3  iPhone MkMapViewの注釈オブザーバーは選択可能で選択可能です  ( Iphone mkmapview annotations observers selectable once ) 
私のMKMapViewには、カスタムマップの注釈が異なり、カスタムビューを作成するときにオブザーバを追加し、デフォルトのポップアップを無効にします。 MapViewController.mの上部にある: <事前> <コード> static NSString*...

3  ネイティブのGoogle MapsアプリケーションではどのKMLフィールドがiPhoneでサポートされていますか?  ( What kml fields are supported in the native google maps application on the iphon ) 
iPhoneアプリケーションでのマップを使用することについての研究をしていますが、私のニーズのほとんどはKMLデータを組み込みのGoogle Mapsアプリケーションに渡すことができるようになりますが、同じ値を設定することはできません(電話、 Mapsアプリ...

2  GoogleマップとGoogle Earthアプリケーション  ( Google maps and google earth application ) 
いくつかの定数に基づいて財産の価値を見つけるためのアプリケーションを開発したい(岸からの距離、財産の葉の幅、等に位置する近所など)-constants私はそのアプリケーションに挿入する必要があるでしょう(私はポイント、ライン、エリア、ジオコーディング情報を含む...

11  Google Maps API - JavaScriptの遅いローディング  ( Google maps api slow loading javascript ) 
Google Maps APIを使用して特定のページにマップを表示しています。 問題は、ファイルのパフォーマンスを非常に遅くするためにファイル http://maps.google.com/maps?file=api..... が非常に遅くなることがあること...

24  Google Mapsバージョン3のzインデックスオーバーレイ  ( Z index overlay in google maps version 3 ) 
すべてのマーカーの上に表示されるGoogle Maps API V3でオーバーレイを取得しようとしています。しかし、Google APIは常に最低のZインデックス優先順位を持つオーバーレイを置くようです。私が見つけた解決策のみは、DOMツリーを介して繰り返し、...

1  FlexコンポーネントのGoogleマップ  ( Google maps in flex component ) 
Google Maps Flash APIをFlexに埋め込み、それはそれをサーバーにアップロードするとき(flex.mydomain.com)私が下記のサンドボックスのセキュリティエラーを獲得します。 <事前> <コード> SecurityError: ...

26  Googleマップ画像?  ( Google maps image ) 
Googleマップの画像をキャプチャする方法はありますか? 私はマップに私自身のポリラインを持っていて、私はそれらを「スクリーンショット」に欲しいので私は静的マップを使うことができません。 基本的に私はユーザーに地図をナビゲートして、いくつかのポリラインを追...

25  地図ルーティング、A LA Googleマップ?  ( Map routing a la google maps ) 
私は常に地図ルーティングによって興味をそそられていましたが、私はそれに良い紹介(または高度なものさえ)レベルのチュートリアルを見つけたことがありません。誰かにポインタ、ヒントなどがありますか? 更新:私は主に地図システムの実装方法(データ構造、アルゴリズムな...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有