谷歌地图没有在android中显示

Question

我有一个应用程序，在这里我使用离子型@电容器/google中的映射javascript来显示地图。当我在浏览器中运行这个应用程序时，它工作得很好。但是，每当我在模拟器或设备中运行应用程序时，地图就不会显示。

方法用于显示谷歌地图：

async createMap(map: ElementRef) {
this.map = await GoogleMap.create({
  id: "capacitor-google-maps",
  element: map.nativeElement,
  apiKey: environment.googleMapsApiKey,
  config: {
    zoom: 18,
    center: this.position,
    mapTypeId: "satellite",
    disableDefaultUI: true,
  },
  forceCreate: true,
});

await this.addMarker(this.position.lat, this.position.lng);
await this.addListeners();
}

Answer 1

在文档上写着：

在Android上，地图呈现在整个uses视图之下，并使用此组件在滚动事件期间管理其定位。这意味着，作为开发人员，您必须确保webview是透明的，从层一直到底层。在典型的Ionic应用程序中，这意味着设置元素(如IonContent和根HTML标记)的透明度，以确保可以看到它。如果你不能在Android上看到你的地图，这应该是你第一次检查。

因此，您需要修改css，以便它在Android上显示，这样的东西应该可以完成以下工作：

ion-content {
  --background: transparent;
}

body {
  background: transparent;
}

然而，做这些css更改会导致许多不必要的样式更改和问题。此外，根据我尝试@电容/谷歌地图的经验，我强烈建议使用@ar角/google-地图，因为它更发达，由谷歌维护，电容器插件还有很长的路要走。

你可以在离子论坛上查看这个帖子，因为我也有同样的问题。

更新：

您可以检查@angular/google-map 这里，也可以检查下面的示例代码：

HTML

<google-map [center]="{lat: 20, lng:20}" [options]="options" height="140px" width="auto">

    <map-marker [position]="{lat: 20, lng: 20}" [options]="markerOptions"></map-marker>

</google-map>

ts：

  markerOptions: google.maps.MarkerOptions = {
    draggable: false,
  };

  options: google.maps.MapOptions = {
    zoom: 13,
    disableDefaultUI: true,
    draggable: false,
    clickableIcons: false, 
  };

您还可以看到Google的文档来获取地图上所有选项的列表