如何使用谷歌地图调整滚动时的叠加层

How do you adjust overlay layer on scroll with Google Maps

本文关键字：叠加 滚动 何使用 谷歌地图 调整      更新时间：2023-09-26

我不知道如何从谷歌地图获取叠加层，以便在地图滚动时自行调整。

我正在做类似的事情

div = document.createElement('div')
div.style.position = 'absolute';
div.borderColor = "red";
this.getPanes().overlayLayer.appendChild(div)

当我滚动地图时，我在地图原始边界所在的叠加层中看到我的div 的红色框。里面的一切都很好，但是如果我滚动后覆盖层外面有新内容怎么办？如果我能让叠加层在每次边界、缩放等时自行调整，那就太好了。改变了，但我看不出如何。

解决此问题的一种

方法是调整附加到覆盖层的任何子项的位置。我可以在"bounds_changed"或一些此类事件上触发绘制，然后在 draw 方法中触发绘制（假设@div是覆盖层的子级）：

bounds = @getMap().getBounds()
sw = overlayProjection.fromLatLngToDivPixel(bounds.getSouthWest());
ne = overlayProjection.fromLatLngToDivPixel(bounds.getNorthEast());
@div.style.left = sw.x + 'px';
@div.style.top = ne.y + 'px';
@div.style.width = (ne.x - sw.x) + 'px';
@div.style.height = (sw.y - ne.y) + 'px';

我想这还不错，但是你必须不断考虑偏移量，而且它看起来并不那么干净。我想这就可以了，但希望有更好的方法让实际的叠加层移动以匹配地图的窗口，而不是固定在初始视口上。

相关文章：