14

我愿意为包含 Google Maps 元素的标签添加一些插入框阴影。但是，似乎什么也没发生，可能是因为 Google 在原始元素中加载了一些其他 div，因此覆盖了生成的 box-shadow。

我怎样才能达到这个效果？

这是我的代码：

<section id="map-container">
    <figure id="map"></figure>
</section>

#map-container  {
    position: relative;
    float: right;
    width: 700px;
    background-color: #F9FAFC;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

#map    {
    position: relative;
    height: 400px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 1px 0 0 #F6F7FB inset, 0 -1px 0 0 #E0E5E1 inset, 0 -2px 0 0 #EBEBED inset, 0 -3px 0 0 #F4F4F6 inset;
}

谢谢！

4

9 回答 9

30

我就是这样做的。以下方法不会与地图控件重叠，因此您将能够对地图进行操作，即拖动、单击、缩放等。

HTML：

<div class="map-container">
    <div class="map"></div>
</div>

CSS：

.map-container {
    position: relative;
    overflow: hidden;
}
.map-container:before, .map-container:after, .map:before, .map:after {
    content: '';
    position: absolute;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    z-index: 1;
}
.map-container:before { top: -5px; left: 0; right: 0; height: 5px; }
.map-container:after { right: -5px; top: 0; bottom: 0; width: 5px; }
.map:before { bottom: -5px; left: 0; right: 0; height: 5px; }
.map:after { left: -5px; top: 0; bottom: 0; width: 5px; }

演示：http: //jsfiddle.net/dkUpN/80/

更新：旧的解决方案（见1 st revision）不支持伪元素并且与旧的浏览器兼容。演示仍然可以在此处获得：http: //jsfiddle.net/dkUpN/。

于 2013-05-17T15:56:42.013 回答
6

我在尝试向嵌入地图的一侧添加嵌入阴影时遇到了同样的问题。我尝试将它添加到 map-canvas 元素，但没有可见的阴影。不知道这种行为的原因，可能是位置：地图中某些元素的绝对值。

无论如何，与其在代码中添加其他无意义的元素，我宁愿选择一个由覆盖在地图上的薄（5px）条带制成的伪元素：

这会在左侧添加阴影：

#map-container:before {
    box-shadow: 4px 0 4px -4px rgba(0, 0, 0, 0.5) inset;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 5px;
    z-index: 1000;
}

演示：http: //jsfiddle.net/marcoscarfagna/HSwQA/

对于右侧阴影：

#map-container:before {
    box-shadow: -4px 0 4px -4px rgba(0, 0, 0, 0.5) inset;
    content: "";
    height: 100%;
    right: 0;
    position: absolute;
    width: 5px;
    z-index: 1000;
}
于 2014-05-31T02:47:15.070 回答
4

弄清楚了。这里工作的CSS：

#map-container  {
    position: relative;
    float: right;
    width: 700px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 1px 0 0 #F6F7FB inset, 0 -1px 0 0 #E0E5E1 inset, 0 -2px 0 0 #EBEBED inset, 0 -3px 0 0 #F4F4F6 inset;
}

#map    {
    position: relative;
    height: 400px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: -1
}
于 2012-06-29T15:30:27.890 回答
1

遇到此类问题时，我通常会恢复使用自定义叠加层。（https://developers.google.com/maps/documentation/javascript/overlays#AddingOverlays）

使用自定义叠加层在地图内添加最适合您的图层上的 div，您将能够使用 CSS 设置此 div 的样式。

于 2013-07-08T17:49:55.033 回答
1

Andrei Horak 的回答效果最好。

但有时由于您的布局，使用 z-index 不是一种选择。向谷歌地图附加一个额外的 div 是第二好的选择：

#map_canvas .shadow{
    width:100%;
    position:absolute;
    left:0;
    top:0px;
    height:100%;
    z-index:99999;
    position:relative;
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

然后在你的谷歌地图脚本中：

google.maps.event.addListener(map, 'idle', function() {
        // Add shadow effect on map
        $("#map_canvas .shadow").remove();
        $("#map_canvas").prepend('<div class="shadow">');

    });

由于跨浏览器兼容性，这pointer-events:none;有点棘手。在此处查找有关指针事件的更多信息

于 2013-10-10T15:13:35.170 回答
1

另一种选择，虽然不是在所有情况下都有效，但将 box-shadow 放在地图旁边的元素上。谷歌自己在这里这样做

于 2014-03-04T14:58:12.900 回答
0

您将需要查看 Google 正在添加的元素，并使用您的 CSS 样式来定位和覆盖这些元素。使用 Firebug、webkit “检查元素”等来查看添加的元素及其样式。

于 2012-06-29T15:09:28.467 回答
0

如果您正在寻找样式信息窗口，请查看此问题。

这适用于谷歌地图上出现的大多数对象。用你自己的 css 来定位它们是可能的，但我怀疑有人做过，因为这很难（我试过）。

于 2012-06-29T15:12:54.063 回答
0

我添加了一个包含嵌入阴影的额外内容。HTML: ... #mapContainer{ 位置：相对；}

.map{
width:425px;
height:350px;
z-index:9999;
position:absolute;
top:0;
left:0;
@include borderAffect($pad:0,$borderCol:#00467F,$insetVal:true);        
}
于 2013-03-27T16:51:20.397 回答