Question

我愿意为包含Google Maps元素的标记添加一些插入框阴影。但是，似乎没有任何反应，可能是因为Google在原始元素中加载了一些其他div，因此覆盖了生成的盒子阴影。

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

这是我的代码：

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

谢谢！

Answer 1

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

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

DEMO： http://jsfiddle.net/dkUpN/80/

更新：旧解决方案（请参阅1^st revision）没有支持伪元素，并且与旧浏览器兼容。此处仍可使用演示：http://jsfiddle.net/dkUpN/。

Answer 2

我在尝试将嵌入阴影添加到嵌入式地图的一侧时遇到了同样的问题。我尝试将它添加到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;
}

Answer 3

想出来。这里有工作的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
}

Answer 4

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

使用自定义叠加层在地图中添加div，无论哪个层最适合您，您都可以使用CSS设置此div的样式。

Answer 5

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;有点棘手。详细了解指针事件here

Answer 6

另一个选项是在所有情况下都不起作用，就是将盒子阴影放在地图旁边的元素上。谷歌自己这样做here

Answer 7

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

Answer 8

如果您希望设计样式，请查看this question。

这适用于Google地图上显示的大多数对象。用你自己的CSS定位它们可能但是我怀疑是否有人做过它因为它是很难（我试过）。

Answer 9

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

.map{
width:425px;
height:350px;
z-index:9999;
position:absolute;
top:0;
left:0;
@include borderAffect($pad:0,$borderCol:#00467F,$insetVal:true);        
}

在Google Maps元素上添加内嵌框阴影

9 个答案: