带有选项卡的Angular / Ionic Framework Google Maps

Question

我已经坚持了两天。 希望有人可以帮助我一点，或指出正确的方向。

我在列表页面使用ionic框架和ion-tabs，一个选项卡显示了描述，另一个选项卡是加载从json获取的经/纬度图。

我无法在第二个标签中加载Google地图。 它将在第一个标签或初始视图中正常加载。 我认为这是因为在选项卡视图中地图div被隐藏或未呈现。

我记得在进行引导时遇到选项卡问题，并且不得不做一些类似的工作

 $("a[href='#maptab']").on('shown.bs.tab', function(){
     mapInitialize();
 }
 });

^基本上是初始化地图。 离子如何做到这一点？

基本上，输入地图后，我需要将地图加载到第二个标签中。

我在下面创建了一个Codepen，您可以看到它在家里可以很好地加载，但是大约不会加载。 关于我打电话给MapCtrl

 <ion-tab title="About" icon="ion-ios-information" href="#/tab/about" ng-controller="MapCtrl">

https://codepen.io/anon/pen/zBWJzw

任何建议或帮助，将不胜感激。

Answer 1

我猜我打电话给控制器的方式就是问题。 如果有人遇到类似的问题，以下是我的工作。

我为地图分配了一个单独的控制器（例如MapCtrl，然后从类似的标签中调用它。

        <ion-tab title="Map" icon-on="ion-earth" icon-off="ion-earth">
            <ion-nav-view name="tab-map">
                <ion-content ng-controller="MapCtrl" ng-init="initialize()">

如果要在iOS模拟器上测试地图并显示空白屏幕，则需要确保将Google脚本网址也列入白名单。