Angular/Ionic Framework带标签的谷歌地图

Angular / Ionic Framework Google Maps with Tabs

本文关键字：标签 谷歌地图 Framework Ionic Angular      更新时间：2023-09-26

我已经被困了两天了。希望有人能帮我一点忙，或者给我指明正确的方向。

我使用ion框架和ion选项卡作为列表页面，一个选项卡显示描述，另一个选项卡是加载我从json获得的lat/lon的映射。

我无法在第二个选项卡中加载谷歌地图。它将在第一个选项卡或初始视图中加载。我认为这是因为mapdiv在选项卡视图中被隐藏或未被渲染。

我记得在bootstrap中，我遇到了标签的问题，不得不围绕这样的东西进行工作

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

^这基本上启动了地图。如何做到这一点与离子？

基本上，我需要在输入时将地图加载到第二个选项卡中。

我在下面创建了一个代码笔，你可以看到它在家里加载得很好，但在about上却没有加载。关于我在MapCtrl 中打电话

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

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

如有任何建议或帮助，我们将不胜感激。

我想我调用控制器的方式就是问题所在。如果有人有类似的问题，下面是我所做的。

我为地图分配了一个单独的控制器（例如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模拟器上测试地图，并得到一个空白屏幕，你需要确保你也将谷歌脚本url列入白名单。

相关文章：