将背景图像添加到Google地图

Question

有没有一种方法可以通过实时的Google地图来实现这种地图叠加效果，还是必须是静态图像？

http://penandthink.com/foldit/

感谢 格雷格

更新

小提琴从@SinistraD

公布 here另一个 Fiddle基于

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); 
});​ 

HERE的这一切小提琴。

我知道这不是一个真正的答案（嗯，也许证明它不是那么简单），而是其他人尝试调整这个的一些起点。