Question

运行离子标签。我的地图工作正常，直到我点击另一个标签，然后点击返回地图。返回地图选项卡时，大部分地图都显示为灰色，并且左上角仍会显示一些地图。如果我抓住地图的可见部分并拖动到中心视图中，我看到可见地图大约是屏幕的2/3 - 但是当我放开时，可见部分会回到左上角 - 现在所有的以前灰色的部分只是一个空白的白色。

此外，如果我只是将设备从纵向旋转到横向 - 地图会完全正确地重绘自己。然后从风景回到肖像模式，再次显示完整的地图。

但对于我的生活，我无法获得“灰色”＆＃39;发生了。

在我的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将映射设置为全局变量时： 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（）是一个外部函数：

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

代替google.maps.event.trigger（setMap，＆＃34; resize＆＃34;），我尝试重新附加map div，认为它已从DOM中删除。这两种方法都不起作用，甚至表明我正在进行正确的修复。在我持有地图的div中，我甚至很难设置宽度/高度css值，正如我读过的那样修复了一些问题（而宽度/高度百分比导致问题）：

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

Answer 1

好吧，我解决了这个问题。当从地图选项卡移动到另一个选项卡时，其他选项卡正在加载AdMob的广告。 AdMob广告不是主要DOM的一部分，它们是子视图，因此它们是持久性的。如果您导航到其他标签，则广告会停留在新标签上的相同位置。当导航回地图选项卡时，广告会跟随并以某种方式干扰谷歌地图能够正确显示自己。

在我的应用中，第一个默认视图是地图标签，它不显示广告，因此在用户返回地图标签（...以及随后的持久AdMob广告）之前不会出现地图问题

Sooo ...我现在使用上述功能完全从地图视图中删除广告。

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

Cordova Admob导致谷歌地图渲染＆＃34;灰色＆＃34;离子标签

1 个答案: