HTML5/CSS3 - 在自定义形状的Div中嵌入谷歌地图

Question

HTML5/CSS3 - 在自定义形状的Div中嵌入谷歌地图

17

我需要制作一个自定义形状的div来容纳“谷歌地图”。自定义边框可以使用png文件处理，但是形状本身，我只有一些理论想法，但实践中没有任何东西。但我认为有一种方法可以使用html5画布在div上制作自定义形状，并在css中使用overflow:hidden来隐藏超出div范围的内容。

目前我的结构如下：

<html>
  <body>
    <div class="Orange_Background"></div>
    <div class="FX_Lines_over_background"></div>
    <div class="GoogleMaps_Container"></div>
  </body>
</html>

因为我需要地图可点击，所以我无法将背景作为png文件仅显示地图。以下是我所说的内容的图片。

图片描述

如果有人能帮助我，我将不胜感激！

谢谢大家。

附注：如果有人知道可以完成此操作的插件，也可以使用jQuery！

- Ricardo Fiorani

我不确定是否没有某些非常丑陋的Hack是做不到的。但是我很想看看人们会想出什么。 - Madara's Ghost

2

有一种方法是使用KML，但是你必须将所有内容与实际背景对齐。而且它只会在地图加载后才加载，因此地图在一段时间内看起来会是矩形的。如果其他方法都失败了，也许可以尝试这种方法。请参见Google的屏幕叠加示例。 - Heitor Chang

如果您想在自定义的div容器中使用静态Google地图或其他内容，请查看此SO Answer。干杯！ - arttronics

2个回答

5

RE: Zee Tee的回答：如果您选择这条路线，您可以在包含图像的div中设置pointer-events: none(在您的css中)。这将使所有鼠标事件发送到它下面的层。抱歉，我还没有评论回答的特权:D

如果您不关心IE（6-8）支持，那么您可以直接在地图层上使用CSS 3D变换来实现这一点。但是地图看起来会被扭曲，如果这是您想要的效果，否则前面的答案仍然是最好的方法。

另一种解决方案是使用蒙版图像。对于此，浏览器支持很差，但如果您有一个良好的备用方案，直到它们赶上，您应该没问题。

https://developer.mozilla.org/en/CSS/-webkit-mask-image

- SMathew

这正是我所需要的！！！！！非常感谢！！！我很快就会发布结果。使用遮罩图像完成。 - Ricardo Fiorani

1

不客气！我想看到最终结果，所以完成后请给我一个链接，谢谢 :) - SMathew

但对我有效的是webkit-mask-image，而Zee Tee的回答并没有提到这个CSS属性。他谈到使用重叠，但用什么来重叠呢？因为我不能使用与背景融合的某些图像。 - Ricardo Fiorani

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Control Freak · Accepted Answer

您需要创建一个具有4个不同层的框架，即顶部/右侧/左侧/底部，并使用透明PNG图像应用更高的z-index、background-image。这些层的位置需要是绝对或固定的。

如下图所示，这4个图像是黑色高亮区域，它们需要被单独切片，然后您可以将它们定位在地图层上方。这样可以保持中间区域没有任何重叠的层，因此地图仍然是功能性的。

您可以将整个橙色背景保留在地图层后面，这并不重要，因为您将首先与地图重叠，然后再与4个框架层重叠，如果正确切片和定位，它们只会重叠背景图像。整个背景图像显然是完整的图像，没有任何地图，但全部是橙色带条纹和渐变。这是一项相当费时的任务，但是可以完成。

注意：透明区域仅是您在黑色高亮区域看到的白色空间，其余部分显然是您的图像。