Question

我有一个小问题。 Google地图未显示在离子2细分中，但显示在细分之外。我使用以下代码，

 <div [ngSwitch]="report_details">
    <div *ngSwitchCase="'details'">
        <div #map id="map"></div>
    </div>
 </div>

我尝试了以下解决方案，但没有奏效：

在外部div上使用100％的高度和宽度。
在地图加载功能上使用超时。

Answer 1

您可以尝试将地图分解为自己的页面，并使用选择器通过ngSwitch指令加载它。这样你就可以使用离子钩子，如ionViewDidEnter（）和ionViewWillEnter（）;

在控制台中。

ionic generate page map

然后在你的HTML中尝试使用类似的东西。

<div [ngSwitch]="report_details">
    <div *ngSwitchCase="'details'">
       <page-map #map id="map"></page-map>
    </div>
</div>

map.ts

ionicViewDidEnter(){
    // initiate map here
}

然后你可以在map.ts / map.html中做任何你想做的事情，它会挂钩到它自己的navCtrl上，以便更灵活。

Answer 2

我遇到了同样的问题，谷歌地图显示出完美的外部细分。因此，按照建议by biranchi125 in Ionic forum的方法，您可以将地图放在段之外并处理何时用选择变量显示它，如下所示：

<div [ngSwitch]="report_details">
  <div *ngSwitchCase="'details'">
    <!-- you can place other elements here if you want -->
  </div>
  <div [style.display]="report_details == 'details' ? 'block' : 'none'">
     <div #map id="map"></div>
  </div>
</div>

它有效：）

离子2，在离子段中使用谷歌地图

2 个答案: