Cordova Admobがイオンマップの「灰色」の描画を引き起こします。

Question

イオンタブが動いています。私の地図は、別のタブをクリックしてから地図に戻るまで、正常に機能します。マップタブに戻ると、地図のほとんどが左上隅に表示されたまま、ほとんどの地図がグレー表示されます。私が地図の可視部分をつかんで中心のビューにドラッグすると、可視の地図は画面の約2/3ですが、目に見える部分を左上の隅に戻すようにすると、今すぐ以前にグレーアウトされたセクションは白い白です。

さらに、デバイスをポートレートからランドスケープに単に回転させると、マップが完全に正しく再描画されます。そして、景色からポートレートモードに戻って、フルマップが再び表示されます。

私の人生のために、私は起こってから 'グレー'を得ることができません。私apps.jsで

：

.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    globalGPS() ; 
    }); 
}) 

.config(function($stateProvider,$urlRouterProvider) { 
    '$compileProvider', 
    function($compileProvider) 
    { 
     $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?||tel):/); 
     // Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...) 
    } 
    $stateProvider 

    // setup an abstract state for the tabs directive 
    .state('tab', { 
    url: "/tab", 
    abstract: true, 
    templateUrl: "templates/tabs.html", 
    controller: 'TabsCtrl' 
    }) 

    // Each tab has its own nav history stack: 
    .state('tab.map', { 
    url: '/map', 
    views: { 
     'tab-map': { 
     templateUrl: 'templates/tab-map.html', 
     controller: 'MapCtrl' 
     } 
    } 
    }) 

GPS機能が標準のJavaScriptファイルからロードされた状態/コントローラの外部で行われ、かつ同一の外部関数がグローバルとしてのマップを設定し、すべてのGPS VAR：私のコントローラで
setMap = new google.maps.Map(document.getElementById("mapBody"), myOptions);

が定義されています

.controller('MapCtrl', function($scope,$rootScope,constants) { 
     // runs this code on EVERY return to map tab 
     $scope.$on('$ionicView.beforeEnter', function(){ 
     if (setMap) { 
      google.maps.event.addListener(setMap, "idle", function(){ 
      google.maps.event.trigger(setMap, "resize"); 
      }) ; 
      // $scope.refreshMap() ; // see note below 
     } 
     }); 

     $scope.refreshMap = function() { 
      setTimeout(function() { 
      $scope.refreshMap_(); 
      }, 1); 
     }; 

     $scope.refreshMap_ = function() { 
     var div = document.getElementById("mapBody"); 
      reattachMap(setMap,div); 
     }; 

reattachMap（ ）外部関数である：（てsetMap、）「サイズを変更」google.maps.event.triggerの代わりに

function reattachMap(map,div) { 
    if (!isDom(div)) { 
    return map; 
    } else { 
    map.set("div", div); 
    while(div.parentNode) { 
     div.style.backgroundColor = 'rgba(0,0,0,0)'; 
     div = div.parentNode; 
    } 
    return map; 
    } 
} 

、私はそれがDOMから削除されていた思考地図のdivを再び取り付ける使用してみました。どちらの方法でもうまく動作しません。

<div id="mapWrapper" style="position:absolute;width:100%;height:100%"> 
    <div id="mapBody" data-tap-disabled="false"></div> 
    </div> 
    </div> 

と

#mapBody { 
    border:2px solid #4e8cf9; 
    text-align:center; 
    height:700px; 
    width:400px;*/ 
    flex: 1; 
} 

：私はいくつかの皆さんの問題を修正している読んでいたとして、私もハード幅/ heigh CSSの値を設定するマップを保持し、私のdivのでは（幅/高さの割合のに対し、問題を引き起こしていました）

Answer 1

さて、私はこの問題を解決しました。地図のタブから別のタブに移動すると、他のタブでAdMobによって広告が読み込まれます。 AdMob広告はメインDOMの一部ではなく、サブビューであり永続的です。別のタブに移動すると、広告は新しいタブの同じ場所にとどまります。地図のタブに戻ると、広告が表示され、何らかの形でGoogleマップの機能が正常に表示されなくなります。マップ]タブにユーザーが戻るまで私のアプリで

、最初のデフォルトのビューは、広告を表示しないマップ]タブれないので、マップ上の問題（...と永続的なAdMob広告は続く）

すっごく...私は今、上記の関数を使用して完全にマップビューから広告を削除します。

.controller('MapCtrl', function($scope,$rootScope,constants) { 
     $scope.$on('$ionicView.beforeEnter', function(){ 
     // this function will run EVERY time user goes back to this tab 
     if (setMap) { // only attempt to remove ad if 'map' is defined 
      removeAd() ; // global external function 
     });