0

运行离子标签。我的地图工作正常，直到我单击另一个选项卡，然后单击返回地图。返回地图选项卡时，大部分地图显示为灰色，左上角仍有一小部分地图。如果我抓住地图的可见部分并拖动到中心视图中，我会看到可见地图大约是屏幕的 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 将地图设置为全局变量时：
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, "resize")，我尝试使用重新附加地图 div，认为它已从 DOM 中删除。这两种方法都不起作用，甚至表明我正在解决正确的问题。在我保存地图的 div 中，我什至硬设置了宽度/高度 css 值，因为我已经读过它修复了一些 ppl 的问题（而宽度/高度百分比导致了问题）：

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

1 回答 1

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
      });
于 2016-07-21T20:41:43.330 回答