在 ionic/angularJS 应用程序中的选项卡之间切换时，Google 地图显示为空白答案

【问题标题】：Google map is shown as blank when switching between tabs in ionic/angularJS application在 ionic/angularJS 应用程序中的选项卡之间切换时，Google 地图显示为空白
【发布时间】：2016-10-22 16:22:39
【问题描述】：

我正在开发一个 Ionic + AngularJS + Cordova 移动应用程序。我在我的应用程序中使用标签。在其中一个选项卡中，我向用户显示了一张地图。我为此使用谷歌地图 V3 api。我正在将地图分配给 div 元素。

var map = null
var mapOptions = {
      center: {lat: sourceLatitude, lng: sourceLongitude},
      zoom: 17,
    };

    map = new google.maps.Map(document.getElementById('map'), mapOptions);

我存储用户的标记。到目前为止一切正常。我能够存储标记信息并在选项卡中显示地图。

现在，在另一个选项卡中，即选项卡二。我显示用户存储的标记。因此，当用户单击任何一个存储的标记时，它应该返回选项卡一并显示带有所选标记的地图。（我正在使用 angularJS ui-router 来处理不同的状态转换）

这是我面临问题的地方。当我从标签二回到标签一时，我得到一张空白地图。我无法看到正在显示的地图。我知道转换发生正确，因为我已经为此登录并休息其他 ui 元素更改。只是地图没有显示出来。

我阅读了 SO 和其他资源，我看到人们推荐了以下内容：

google.maps.event.trigger(map, 'resize');

我已将上述语句放在我的 angularJS 控制器中，这样当它从 tab-2 移动到 tab-one 时，它会尝试调整大小或刷新地图。我在控制台中收到以下错误。

Error: a is undefined
_.C.hasListeners@http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places:93:707
_.C.trigger@http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places:94:32

我在某处读到变量映射应该是全局的。因此，我尝试将地图也放在 $rootScope 上，而不是使用 var

$rootScope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

但在这两种情况下都没有运气:(。

以前有人见过这个问题吗？任何帮助或指示将不胜感激。提前感谢您的帮助。

问候， V

【问题讨论】：

我宁愿用javascript标记这个问题，但我不知道你应该删除哪个。
完成..标记为 javascript
也编辑了您的标签，因为我认为 maps-api-3 在这种情况下非常重要...

标签： javascript angularjs cordova google-maps-api-3 ionic-framework

【解决方案1】：

经过 5 天的努力，我终于设法解决了我的问题。认为如果有人发现自己处于同样的情况，也可以在这里发布我的解决方案。

我观察到，在第一次创建和初始化控制器时，地图得到了正确渲染。当我在两个选项卡之间切换时使用了相同的控制器，并且显示地图没有问题。

只有当我单击选项卡 2 中存储的标记时，它才创建了一个新的控制器，该控制器在渲染地图时出现了问题。我正在更改按钮单击时的状态，这可能是创建控制器新实例的原因。

所以，我所做的就是将我的地图控制器应用到 index.html 的正文中

<body ng-app="storeMarkerApp" ng-controller="MapController">

以便在两个选项卡中以及当我单击存储的标记按钮时使用相同的控制器。这解决了这个问题。地图正在正确渲染。

希望这会有所帮助。

问候， V

【讨论】：

【解决方案2】：

我遇到了同样的问题，我的解决方案：

document.getElementById('map').innerHTML = ''; 
document.getElementById('map').innerHTML = '<div id="inner_map_div" style="width: 100%; height:400px"></div>';
new google.maps.Map(document.getElementById('inner_map_div'), mapOptions);

为我工作:)

【讨论】：

我尝试了您推荐的解决方案。它对我不起作用:(我仍然继续得到空白地图。