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

dro*_*zdo 11 javascript css google-maps google-maps-api-3

切换到另一个浏览器选项卡然后返回后,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>
Run Code Online (Sandbox Code Playgroud)

opacity: 0 是动态的,单击另一个浏览器选项卡后会更改为 opacity: 1。
为什么 Gmaps JS API 这样有效?知道如何从视点中清楚地删除这个正方形吗?

编辑:

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

作为 bug 打开的问题: Google Issuetracker

小智 34

我遇到了同样的问题,CSS 有效:

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


dro*_*zdo 1

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

  • 问题似乎没有解决。不得不使用@SeaTheme的解决方案 (6认同)
  • 我也遇到了这种情况,值得庆幸的是我没有浪费时间去调试它 (2认同)