Google 地图 JS API 显示蓝色焦点边框

Question

切换到另一个浏览器选项卡然后返回后，Google Maps JS API 开始在地图周围显示蓝色焦点边框。单击地图后，边界就会消失。
带边框的元素由 Gmaps 生成并在其 DOM 内。边框似乎只在整页地图显示中显示。

跟踪 Gmap DOM 在 gm-style 的子级处显示边框：(div.gm-style > div)

<div style="pointer-events: none; width: 100%; height: 100%;
           box-sizing: border-box; position: absolute; z-index: 1000002;
           opacity: 0; border: 2px solid rgb(26, 115, 232);"></div>

不透明度：0 是动态的，单击另一个浏览器选项卡后会更改为不透明度：1。
为什么 Gmaps JS API 这样有效？知道如何从视点中清楚地移除这个正方形吗？

编辑：

• Chrome 89 && Mozilla 86 中显示蓝色方块
• 步骤：打开 js fiddle 链接 -> 聚焦地图（从一侧到另一侧轻松滚动地图） -> 更改浏览器选项卡 -> 返回带有 jsfiddle 示例的选项卡 -> 蓝色方块 JSFiddle 示例

将问题作为错误打开： 谷歌问题追踪器

Answer 1

我遇到了同样的问题，CSS 有效：

.gm-style iframe + div { border:none!important; }

Answer 2

问题已作为谷歌地图错误关闭。 Bug 将在下一个 GMApi 版本中修复。 问题追踪器谷歌

Answer 3

是的，幸运的是有一个 CSS 选项。虽然我们无法直接编辑边框，因为无法使用 CSS 访问第三方 iframe 中的样式，但我们可以使它们从屏幕上消失。

我们可以拥有一个带有溢出的容器：隐藏。而对于iframe的宽度和高度，我们需要在每一侧额外添加2px，这是边框的大小。总共，它应该是所需的大小 + 4px。您可以手动或使用计算来完成此操作。

宽度：904px； - 或者 - 宽度：计算（100% + 4px）

身高也是如此。

我们还需要在所有方面给它一个 负边距。

在这种情况下：边距：-2px;

HTML：

<div class="map-container flex">
    <iframe
      class="map-iframe"
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3537.5954957698427!2d2.7761919568658993!3d41.7905716475711!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12bb23bd7b467cdd%3A0x967a16eb7b9cd5a2!2sDavid%20Lampista%2Finstalacions(Instal.nova%2Creformes%2C%20taller%20reparacio%20electrodomestics)!5e0!3m2!1ses!2ses!4v1709800556414!5m2!1ses!2ses"
      width="900"
      height="450"
      allowfullscreen=""
      loading="lazy"
      referrerpolicy="no-referrer-when-downgrade">
    </iframe>
</div>

CSS：

.map-container {
  overflow: hidden;
  height: 450px;
  display: flex;
}

.map-iframe {
  height: calc(100% + 4px);
  min-width: calc(100% + 4px);
  margin: -2px;
  background-color: #e5e3df;
}

如果容器有display:flex，我们应该修改min-width 而不是宽度。