14

Googleマップ要素を含むタグにインセットボックスシャドウを追加したいと思います。ただし、おそらく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;
}

ありがとうございました！

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 リビジョンを参照)には疑似要素のサポートがなく、古いブラウザーと互換性がありました。デモはまだhttp://jsfiddle.net/dkUpN/で利用できます。

于 2013-05-17T15:56:42.013 に答える
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

Andrei Horak の回答が最適です。

ただし、レイアウトが原因で z-index を使用できない場合があります。余分な div を Google マップに追加することは、次善の策です。

#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マップスクリプトで：

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

この種の問題に直面すると、通常はカスタム オーバーレイの使用に戻ります。( https://developers.google.com/maps/documentation/javascript/overlays#AddingOverlays )

カスタム オーバーレイを使用して、マップ内の最も適したレイヤーに div を追加します。CSS でこの div のスタイルを設定できます。

于 2013-07-08T17:49:55.033 に答える
1

すべてのケースで機能するわけではありませんが、もう 1 つのオプションは、マップの隣の要素にボックス シャドウを配置することです。Google自身がここでこのようにしました

于 2014-03-04T14:58:12.900 に答える
0

情報ウィンドウのスタイルを設定する場合は、この質問を参照してください。

これは、グーグルマップに表示されるほとんどのオブジェクトに適用されます。あなた自身のcssでそれらをターゲットにすることは可能ですが、それが難しいので誰もがそれをしたことはないと思います（私は試しました）。

于 2012-06-29T15:12:54.063 に答える
0

Google が追加している要素を確認し、それらを CSS スタイルでターゲットにしてオーバーライドする必要があります。Firebug、webkit の「要素の検査」などを使用して、追加される要素とそのスタイルを確認します。

于 2012-06-29T15:09:28.467 に答える
0

はめ込み影を含むエクストラを追加しました。HTML: ... #mapContainer{ position:relative; }

.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 に答える