將背景圖像添加到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的這一切小提琴。

我知道這不是一個真正的答案（嗯，也許證明它不是那麼簡單），而是其他人嘗試調整這個的一些起點。