angular - 使用 @angular/google-maps 将自定义样式添加到 Angular map

Question

我正在使用 Angular 11 和 @angular/google-maps，我希望创建一个与其父级宽度相同的 map ，但我只能获得一个方形 map (如图所示)

我正在使用我的 API key 调用 index.html 中的 google-maps api 脚本

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"
  type="text/javascript"></script>

并在我的overview.component.ts中生成 map

    <div id='map'>
      <google-map [center]='center'></google-map>
    </div>

在overview.component.scss中为其指定以下样式

.main-container {
  width: 100%;
  height: 100%;
}

#map {
  padding: 1% 1% 1% 1%;
  width: 100% !important;
  height: 400px !important;
}

我也尝试过使用 google-map 标签本身，但没有任何运气

Answer 1

您需要在 google-map 标记中设置宽度。

<google-map width="100%"></google-map>

您可以在文档 here 中找到更多信息

这是一个 stackblitz 示例 here