16

「グーグルマップ」マップを保持するカスタムシェイプ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として使用して地図のみを表示することはできません。また、地図をクリック可能にする必要があるためです。

これが私が言っていたことのイメージです。

Teh Image

誰か助けてくれたらありがたいです!!

皆さん、ありがとうございました。

PS：jqueryでも可能です！（誰かがそれを行うプラグインを知っている場合。）

4

2 に答える 2

5

上/右/左/下の4つの異なるレイヤーでフレームを作成し、マップ自体よりも透明なPNG画像を使用して、より高いz-indexの背景画像を適用する必要があります。位置は絶対的であるか、それらのレイヤーで固定されている必要があります。

以下に示すように、4つの画像は黒で強調表示された領域であり、個別にスライスする必要があります。その後、それらをマップレイヤー上に配置できます。これにより、レイヤーが重ならないように中央の領域が開いたままになるため、マップは引き続き機能します。

オレンジ色の背景全体をマップレイヤーの背後に保持できます。最初にマップとオーバーラップし、次に適切にスライスして適切に配置すると背景画像とオーバーラップする4つのフレームレイヤーとオーバーラップするため、問題ありません。背景画像全体は明らかに完全な画像であり、地図はありませんが、すべてオレンジ色で、縞模様とグラデーションがあります。あなたが私に尋ねた場合、かなりの作業であり、時間がかかりますが、可能です。

ここに画像の説明を入力してください

注：透明な領域は、黒いハイライトに表示される空白のみであり、残りは明らかに画像になります。

于 2012-07-04T21:09:08.023 に答える
4

RE：Zee Teeの答え：このルートを使用する場合は、画像を含むdivに対してpointer-events：none（css内）を設定できます。これにより、すべてのマウスイベントがその下のレイヤーに送信されます。申し訳ありませんが、回答にコメントする権限はまだありません：D

IE（6-8）のサポートを気にしない場合は、CSS3D変換を使用してマップレイヤーで直接これを行うことができます。しかし、それがあなたが求めている効果である場合、マップは歪んで見えるでしょう、そうでない場合でも、前の答えは依然として最良のアプローチです

別の解決策は、マスク画像を使用することです。申し訳ありませんが、ブラウザのサポートはこれを嫌いますが、追いつくまでのフォールバックがあれば、大丈夫です。

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

于 2012-07-04T21:33:32.167 に答える