Ionic 5 Angular：iOs 模擬器中的 Google Maps InfoWindow 填充問題

Question

我在使用 Ionic5 Angular 的 iOs 模擬器中如何渲染谷歌地圖 InfoWindow 時遇到了問題。

這是一張圖片：

如您所見，填充是不一致的，尤其是在文本與信息窗口邊界相抵的最右側。 這可能是一個時間問題，因為如果我將 InfoWindow（使用 setTimeout()）的創建延遲幾秒鍾，它通常會正確呈現。

當我模擬同一個項目時，Android 不會發生這種情況，因為該平台上的填充是正確的。 我嘗試手動為 InfoWindow 內容添加樣式，但沒有任何理由我需要有選擇地將填充添加到 iOs 而不是 Android。 我也不應該添加任意超時。

如果有人有任何想法，將不勝感激。 我已經盡可能地簡化了代碼。

模擬器是 iPhone 11 (13.2.2)。

這是我的離子信息：

Ionic:

   Ionic CLI                     : 5.4.2
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.803.23
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 28 other plugins)

Utility:

   cordova-res : 0.6.0 (update available: 0.15.1)
   native-run  : 0.2.8 (update available: 1.0.0)

System:

   Android SDK Tools : 26.1.1 (/Users/me/Library/Android/sdk)
   ios-sim           : 8.0.2
   NodeJS            : v10.9.0 (/Users/me/.nvm/versions/node/v10.9.0/bin/node)
   npm               : 6.10.3
   OS                : macOS Catalina
   Xcode             : Xcode 11.5 Build version 11E608c

這是.ts文件：

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-dynamic-map',
  templateUrl: './dynamic-map.component.html',
  styleUrls: ['./dynamic-map.component.scss']
})
export class DynamicMapComponent implements AfterViewInit {
  @ViewChild('googleMap', { static: false }) private googleMap: ElementRef;

  private map: google.maps.Map;
  private marker: google.maps.Marker;
  private lat: number = 37.066076;
  private lng: number = -119.897168;

  constructor() {}

  ngAfterViewInit() {
    const mapProp: any = {
      center: new google.maps.LatLng(this.lat, this.lng),
      zoom: 13
    };

    this.map = new google.maps.Map(this.googleMap.nativeElement, mapProp);
    google.maps.event.addListenerOnce(this.map, 'tilesloaded', () => {
      this.addMarkerWithInfoWindow();
    });
  }

  addMarkerWithInfoWindow() {
    const infoWindow = new google.maps.InfoWindow({
      content: '<b>Address</b>: 1234 W Main Street'
    });

    this.marker = new google.maps.Marker({
      position: new google.maps.LatLng(this.lat, this.lng),
      map: this.map
    });
    infoWindow.open(this.map, this.marker);
  }
}

和.html

<div #googleMap style="width:100%; height: 100%" class="googleMap"></div>

Answer 1

@jwBurnside 您可以為 InfoWindow 中的 contentString 添加樣式。

您的信息窗口

const infoWindow = new google.maps.InfoWindow({
      content: '<div id="content"><b>Address</b>: 1234 W Main Street</div>'
 });

和你的 css 是

#content {
  padding: 5px;
}

它將在 InfoWindow 彈出窗口中修復您正確的 alignment。

參考： https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

Answer 2

地圖庫添加溢出：創建InfoWindow彈出時overflow: scroll到容器。 雖然這適用於其他瀏覽器，但對於 iPhone 的移動瀏覽器，它的行為似乎並不相同。

添加以下樣式以解決問題：

.gm-style .gm-style-iw-d {
  -webkit-overflow-scrolling: auto;
}

Answer 3

剛剛想出了另一個解決方案。 右側和底部間距來自overflow: scroll添加到.gm-style.gm-style-iw-d 。 所以這個想法是刪除那個間距，因為行為不一致。 然后根據需要使用自定義 styles 添加自己的間距。 在這種情況下，您的自定義間距將在 Android 和 iOS 上保持一致。

要刪除間距：

.gm-style .gm-style-iw-d {
  overflow: auto !important;
}

PS感謝這兩個答案的信息：

• Dipen Shah的回答
• 伊萬維爾奇的回答