如何将我的 google 地图信息 window 内容居中？

Question

我这里有这个 stackblitz 打开 google 地图信息 window。我已经删除（隐藏）了关闭按钮，但是 window 在右侧填充 and/or 边距上仍然关闭。

如何将信息 window 中的 bootstrap 卡片居中？

Answer 1

右边那个额外的白色space是通过以下样式添加的：

<div class="gm-style-iw-d" style="overflow: scroll; max-height: 508px;">
                                  ^^^^^^^^^^^^^^^^

这意味着浏览器始终显示滚动条，无论是否实际剪切了任何内容。用户在这里看不到滚动条，因为它几乎没有用 google 地图自定义。

您应该将其更改为 overflow: auto:

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

另一个问题位于此处：

<div class="gm-style-iw gm-style-iw-c" style="padding-right: 0px; padding-bottom: 0px;
                                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

如您所见，右侧的填充已删除。你应该保持它们以前的样子 (12px):

:host ::ng-deep .gm-style-iw-c {
    padding-right: 12px !important;
    padding-bottom: 12px !important;
}

最后一个解决方案是从卡片中删除硬编码宽度：

<div class="card" style="width: 18rem;">
                         ^^^^^^^^^^^^^
                         remove this

这样卡片的宽度默认为 100%。

Forked Stackblitz

如何将我的 google 地图信息 window 内容居中？

How can I center my google maps info window content?

html

javascript

css

google-maps-api-3

angular