谷歌地图标记阻止页面滚动

Question

我正在使用谷歌地图标记来显示一些带有自定义图标的位置。 有时有很多标记在移动设备上占据了屏幕的很大一部分。

我将 google maps 设置为gestureHandling: 'cooperative',因此可以在屏幕上显示 map 时滚动页面。 当用户开始在标记上滚动时，会出现“用两根手指移动地图”信息，但页面不会滚动。 开始拖动 map 上的任意位置，页面会按预期滚动。

这种行为也可以在移动模式（触摸）的标记 API 文档 ( https://developers.google.com/maps/documentation/javascript/examples/marker-simple ) 上观察到。

当用户从标记开始时，有没有办法解锁页面滚动？

Answer 1

我发现向所有停止传播的标记<img标记添加一个touchstart侦听器将阻止谷歌的事件，从而允许页面滚动。

我很幸运地使用了以下代码，但值得注意的是：

• tilesloaded在标记加载时并不严格，所以它有点竞争条件。 如果您能找到更好的活动，请告诉我。
• 选择器有点乱，它捕获了我所有的标记图像，但如果它有意更具体，我会更高兴。

google.maps.event.addListenerOnce(map, "tilesloaded", () => document.querySelectorAll(`.gm-style div[role='button'] img[draggable='false']`).forEach(x => x.addEventListener("touchstart", (e) => { e.stopImmediatePropagation() })));

我也赞成这个问题，但我并没有屏住呼吸。