Google Chrome 84 + Google Maps InfoWindow：点击关闭按钮时防止网页跳转答案

【问题标题】：Google Chrome 84 + Google Maps InfoWindow: Prevent webpage jump when clicking close buttonGoogle Chrome 84 + Google Maps InfoWindow：点击关闭按钮时防止网页跳转
【发布时间】：2020-09-07 22:21:33
【问题描述】：

在使用 JavaScript API 关闭嵌入在网页中的 Google 地图中的信息窗口时，Google Chrome v84 中似乎有一个奇怪的行为：

当页面没有滚动到顶部时，单击信息窗口上的关闭按钮会使页面的滚动位置向下跳转15px。

这在版本 83 及更低版本中没有发生。

跟踪器中的新问题：https://issuetracker.google.com/issues/163214518
JSFiddle 演示：http://jsfiddle.net/upsidown/hb1dx5a3/

这是一个简单的可重现示例。向下滚动页面直到地图在视口中，单击标记，关闭信息窗口，页面将向下滚动15px。

function initialize() {

  const mapOptions = {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(0, 0)
  };

  const map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  const marker = new google.maps.Marker({
    position: new google.maps.LatLng(0, 0),
    map: map,
    title: 'Nothing here'
  });

  const infowindow = new google.maps.InfoWindow({
    content: 'Hello World'
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });

  google.maps.event.addListener(infowindow, 'closeclick', function() {
    displayVerticalOffset();
  });

  window.onscroll = function() {
    displayVerticalOffset();
  };
}

function displayVerticalOffset() {
  document.getElementById('pageYOffset').innerHTML = 'Vertical offset: ' + window.pageYOffset + 'px'
}

#map-canvas {
  margin-top: 800px;
  height: 180px;
  width: 180px;
}

#pageYOffset {
  margin-bottom: 800px;
}

<div id="map-canvas"></div>
<div id="pageYOffset"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize" async defer></script>

【问题讨论】：

这不是我这边的编程错误 - 是的，除非您通过提供minimal reproducible example 来证明我们并非如此。
我想我说错了。我的意思是：“要确定我并不孤单。”。为了使其可重现，我添加了一个简单的代码示例。
我编辑了您的问题以包含一个堆栈 sn-p 允许重现该问题并在他们的跟踪器中创建了一个新的 issue。如果您想收到有关它的更新，您应该为该问题加注星标。
@MrUpsidown 感谢您的帮助！我感谢您的努力。
刚刚应用了来自 Google 问题跟踪器的 @MrUpsidown 副本的临时解决方案：issuetracker.google.com/issues/163170951 您可以添加 css 属性“overflow-anchor: none;”到您的地图容器，这种行为可能会被阻止。

标签： javascript google-chrome google-maps google-maps-api-3

【解决方案1】：

将overflow-anchor:none添加到父级，这里是

#map-canvas {
  overflow-anchor:none;
}

【讨论】：

我已经想了好几个小时了，谢谢！！