javascript - How do you adjust overlay layer on scroll with Google Maps

Question

I can't figure out how to get the overlay layer from Google Maps to adjust itself when the map is scrolled.

I'm doing something like

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

And when I scroll the map around I see the red box of my div in the overlay where the original border of the map was. Everything inside there is fine, but what if there is new content outside that overlay layer once I scroll? It would be nice if I could get the overlay layer to adjust itself every time the bounds, zoom etc. Changed but I can't see how.

Answer 1

解决此问题的一种方法是调整您附加到叠加层的任何孩子的位置。我可以在“bounds_changed”或某些此类事件上触发绘制，然后在绘制方法中触发（假设@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';

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