当在离子/ angularJS应用程序中切换标签页时，Google地图显示为空白

我正在使用Ionic + AngularJS + Cordova移动应用程序。我在我的应用程序中使用选项卡。在其中一个标签中，我向用户显示了一张地图。我正在使用谷歌地图V3 API。我将地图分配给一个div元素。当在离子/ angularJS应用程序中切换标签页时，Google地图显示为空白

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

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

我存储了用户的标记。迄今为止所有的工作都很好我能够存储标记信息并显示地图以及制表符。

现在，在另一个选项卡即tab-two中。我显示用户的存储标记。这样，当用户点击任何一个存储的标记时，它应该回到标签页，并且应该显示带有所选标记的地图。（我正在使用angularJS ui-router处理不同的状态转换）

这是我面临问题的地步。当我从tab-2回到tab-one时，我得到一张空白的地图。我无法看到正在显示的地图。我知道转换正确发生，因为我已经为此登录并且其他UI元素发生了更改。这只是没有出现的地图。

我看周围SO和其他来源，我看到人们已经提出以下建议：

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

我已经把上面的语句在我angularJS控制器，这样，当它从移动制表两制表一，它会尝试调整或刷新地图。我在控制台中得到下面的错误。

Error: a is undefined 
[email protected]://maps.googleapis.com/maps/api/js?sensor=false&libraries=places:93:707 
[email protected]://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

来源

2016-06-21 LearnToLive

我宁愿用标签'javascript'这个问题，但我不知道你应该删除哪一个。 – MrUpsidown

done..tagged as javascript – LearnToLive

也编辑了你的标签，因为我相信maps-api-3在这种情况下非常重要... – MrUpsidown

我有同样的问题，我的解决办法：

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

我

工作:)

来源

2016-06-24 13:22:28

我试过你推荐的解决方案。它没有为我工作:(我仍然继续得到空白地图。 – LearnToLive

我终于设法与它挣扎了5天之后，以解决我的问题。认为在这里发布我的解决方案以及任何人发现自己处于相同情况下都是很好的做法。

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

只有当我点击tab-two中存储的标记时，它才创建了一个新的控制器，它在渲染地图时遇到了问题。我正在改变按钮点击的状态可能是创建控制器的新实例。

所以，我所做的是将我的地图控制器应用到索引的主体。HTML

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

使得相同的控制器在两个凸片使用，并且当我点击所存储的标记按钮。这解决了这个问题。地图得到正确渲染。

希望这会有所帮助。

问候， V

来源

2016-06-30 07:51:57 LearnToLive

当在离子/ angularJS应用程序中切换标签页时，Google地图显示为空白

回答

相关问题