Ionic 5 Angular：iOS 模拟器中的 Google Maps InfoWindow Padding 问题

Question

我遇到了如何使用 Ionic5 Angular 在我的 iOs 模拟器中呈现 google maps InfoWindow 的问题。

这是一张图片：

如您所见，填充不一致，尤其是在最右侧的文本与 InfoWindow 边界相对的位置。这可能是一个时间问题，因为如果我将 InfoWindow（使用 setTimeout()）的创建延迟几秒钟，它通常会正确呈现。

当我模拟同一个项目时，这不会在 Android 中发生，因为该平台上的填充是正确的。我尝试手动为 InfoWindow 内容添加样式，但没有任何理由需要有选择地向 iO 添加填充而不是 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;
}

它将修复您在信息窗口弹出窗口中的右对齐问题。

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