Question

有没有办法通过实时Google地图实现此地图叠加效果，还是必须是静态图片？

由于格雷格

更新

小提琴基于来自@SinistraD的另一个here发布Fiddle

Answer 1

我不明白为什么你不能用实时谷歌地图做到这一点。您只需将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是这一切的小提琴。

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

将背景图片添加到Google地图

2 个答案: