HTML5/CSS3 - Пользовательская форма Div с картами google внутри

Мне нужно создать пользовательский элемент формы, содержащий карту "google maps". Таможенная граница это прекрасная, я могу справиться с ней, используя png, но сама форма, у меня есть только некоторые теории, как это сделать, но ничего на практике. Но я думаю, что есть способ сделать это, используя html5 canvas, чтобы сделать пользовательскую форму на div и использовать в css переполнение: скрытый, чтобы скрыть то, что выходит из 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! (если кто-то знает плагин, который это делает.)

Ответы

Ответ 1

RE: Ответ Zee Tee: если вы идете по этому маршруту, вы можете установить указатели-события: none (в вашем css) для div, содержащего изображения. это отправит все события мыши на слой под ним. Извините, у меня пока нет возможности комментировать ответы: D

Если вам не нужна поддержка IE (6-8), вы можете использовать 3D-преобразования CSS, чтобы сделать это прямо на слое карты. Но карта будет выглядеть искаженной, если эффект, который вам нужен, если не предыдущий ответ по-прежнему является наилучшим подходом

Другим решением является использование изображения маски. извините, что поддержка браузера отстойна для этого, но если у вас есть хороший резерв, пока он не догонит, вы должны быть в порядке

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

Ответ 2

Вам нужно будет создать кадр с 4 различными слоями: верхний/правый/левый/нижний и применить более высокий z-индекс, фоновое изображение, используя прозрачное изображение PNG, чем сама карта. Позиция должна быть абсолютной или фиксированной на этих уровнях.

Как вы можете видеть ниже, 4 изображения - черные выделенные области, и их нужно будет нарезать индивидуально, тогда вы можете поместить их поверх слоя карты. Это удерживает среднюю область открытой без каких-либо перекрывающихся слоев, поэтому карта все еще функционирует:

Вы можете сохранить весь оранжевый фон за слоем карт, это не имеет значения, потому что вы сначала наложите его на карту, а затем на 4 слоя кадра, которые, если правильно нарезать и правильно разместить, просто перекрывают фон образ. Весь фоновый рисунок, очевидно, будет полным изображением, без каких-либо карт на нем, но все оранжевые с вашими полосами и градиентом. Если вы спросите меня, это займет много времени, но это возможно.

enter image description here

ПРИМЕЧАНИЕ. Прозрачные области - это только белые пробелы, которые вы видите в черных бликах, остальное, очевидно, будет вашим изображением.