Javascript 在ionic/angularJS应用程序中切换选项卡时，Google地图显示为空白_Javascript_Angularjs_Cordova_Google Maps Api 3_Ionic Framework

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

javascript angularjs cordova google-maps-api-3 ionic-framework

Javascript 在ionic/angularJS应用程序中切换选项卡时，Google地图显示为空白,javascript,angularjs,cordova,google-maps-api-3,ionic-framework,Javascript,Angularjs,Cordova,Google Maps Api 3,Ionic Framework,我正在开发一款Ionic+AngularJS+Cordova移动应用程序。我正在应用程序中使用选项卡。在其中一个选项卡中，我向用户显示地图。我正在使用谷歌地图v3api来实现这一点。我正在将映射分配给div元素 var map = null var mapOptions = { center: {lat: sourceLatitude, lng: sourceLongitude}, zoom: 17, }; map = new google.maps.M

我正在开发一款Ionic+AngularJS+Cordova移动应用程序。我正在应用程序中使用选项卡。在其中一个选项卡中，我向用户显示地图。我正在使用谷歌地图v3api来实现这一点。我正在将映射分配给div元素

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

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

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

现在，在另一个选项卡中，即选项卡2。我显示用户存储的标记。因此，当用户单击任何一个存储的标记时，它应该返回到选项卡1，并显示地图，其中显示选定的标记。（我使用angularJS ui路由器处理不同的状态转换）

这是我面临的一个问题。当我从选项卡二返回到选项卡一时，会得到一张空白地图。我看不到正在显示的地图。我知道转换是正确的，因为我已经登录到了相应的位置，其他ui元素也发生了变化。只是地图没有显示出来

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

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

我已经将上述语句放在我的angularJS控制器中，这样当它从选项卡2移动到选项卡1时，它将尝试调整或刷新地图。我在控制台中得到以下错误

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

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

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

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

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

问候,，

我也有同样的问题，我的解决方案是：

document.getElementById（'map'）。innerHTML=''；
document.getElementById（'map'）。innerHTML=''；
新的google.maps.Map（document.getElementById（'internal_Map_div'），mapOptions）；

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

document.getElementById（'map'）。innerHTML=''；
document.getElementById（'map'）。innerHTML=''；
新的google.maps.Map（document.getElementById（'internal_Map_div'），mapOptions）；

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

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

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

所以，我所做的是将我的映射控制器应用到index.html的主体

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

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

希望这有帮助

问候,，

经过5天的努力，我终于解决了我的问题。我想在这里发布我的解决方案也不错，以防有人发现自己处于同样的情况

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

所以，我所做的是将我的映射控制器应用到index.html的主体

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

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

希望这有帮助

问候,，

我宁愿用

javascript

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

javascript

标记这个问题，但我不知道你应该删除哪个。完成..标记为javascriptEdited您的标签也是一样，因为我相信maps-api-3在本例中非常重要…我尝试了您推荐的解决方案。它对我不起作用：（我仍然获得空白地图。我尝试了您推荐的解决方案。它对我不起作用：（我仍然获得空白地图）。