向Google Maps添加背景图像

Question

是否可以通过实时Google地图实现此地图叠加效果，还是必须是静态图像？

http://penandthink.com/foldit/

谢谢格雷格

更新资料

小提琴在这里根据@SinistraD的另一个小提琴发布

Answer 1

我不明白为什么您无法使用实时Google地图来做到这一点。 您只需将PNG覆盖在实时地图上，而不是静态地图上即可。 但是，问题在于，由于PNG覆盖会阻止鼠标事件（例如，拖动）到达实时地图，因此您会丢失实时Google地图的交互性。 有很多JavaScript方式可以解决此问题，但是不一定很轻松也不优雅。

Answer 2

我认为这是一个很好的问题。

应该有可能，但不幸的是我做不到。 我尝试没有成功。 有一些问题。

让我们从图像叠加开始。 HTML看起来像这样：

<div id="map">
    <img id="map-paper" src="http://penandthink.com/foldit/frame.png"/>
    <iframe ... google maps code... ></iframe>
</div>​

而CSS是这样的：

#map {
    position: relative;
    padding: 20px;
}

#map iframe {
    margin: 10px;
}

#map-paper {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('http://penandthink.com/foldit/frame.png');
}

这几乎可以工作，但不能完全解决，有些部分由于我找不到的原因而没有完全涵盖。

第二个问题是行为丧失。 问题是，您必须模拟图像下方的点击。 因此，像这样的jQuery代码应该可以工作，但不能：

$('#map').click(function(e) {
    $(this).children('iframe').click(e);
});​

这里是所有这些的小提琴。

我知道这并不是一个真正的答案（嗯，也许是证明这样做不是那么简单），而是其他尝试对此进行调整的起点。