Неподвижное изображение над картой Листовка

я не писал здесь раньше, но читать широко, так что я надеюсь, что я не грешите никаких правил ...Неподвижное изображение над картой Листовка

Я пытаюсь поместить вид изображения маски (черный квадрат с прозрачное круговое отверстие в нем) над картой буклета; делает его похожим на круглую карту, отображаемую на экране старого осциллографа ;-). Абсолютно позиционируется сверху: 0px; bottom: 0px ;. Исправлено, независимо от масштабирования или панорамирования.

Я могу получить изображение для отображения, в некоторых случаях я могу даже получить карту для панорамирования и масштабирования прозрачного отверстия, я даже могу нажать X, чтобы закрыть всплывающее окно на маркере, но независимо от того, что я пытаюсь Я НИКОГДА не могу заставить всплывающие окна маркера появляться при нажатии или прикосновении.

Я пробовал сочетание zillion: используя PNG-изображение или необработанный SVG-код, изменяя z-index, в div или нет. Я попытался в том же контейнере, в другом контейнере, даже при добавлении его к панели управления листовки:

document.getElementsByClassName("leaflet-control-container")[0].innerHTML += '\ 
    <svg style="position: absolute; top: 0px; left: 0px; height: 360px; width: 360px;">\ 
     <g>\ 
      <path style="fill-rule: evenodd; fill: black; stroke: black; stroke-width: 0"\ 
        d="M 0,0 L 360,0 L 360,360 L 0,360 z M 180,10 A 170,170 0 0,1 180,350 A 170,170 0 0,1 180,10 z"></path>\ 
     </g>\ 
    </svg>';

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

Если я установил z-индекс svg равным -1, маску больше не отображает, но всплывающее окно появляется.

источник

2013-08-30 Mike Tommasi

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

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

Самый простой способ, вероятно, используя PNG и следующую строку CSS:

указатель событий: нет;

Это делает действия мыши под элементом возможным.

Смотрите здесь для совместимости IE и немного больше информации: Click through a DIV to underlying elements

источник

2013-08-30 18:45:57 Vincent

Btw in case pointer-events: none не совместим с тегом img, попробуйте поместить img в div. – Vincent

Большое спасибо за ваш ответ, вы спасли меня много времени! Довольно умный. Он работает, в том числе на Android. Я использовал div с фоновым изображением и магией, но малоизвестными, указателями-событиями: нет. Однако он НЕ работает на Android по тегу svg по какой-то причине (думал, что работает в Chrome). –

Приятно слышать, как это сработало! Нечетно слышать об этом не работает на svg на Android, тем более, что свойство происходит из svg. Кстати, не могли бы вы пометить мой ответ, как принято? – Vincent

Что делать, если вместо наложения маски на карту вы помещаете карту в div с border-radius:50%; overflow:hidden? Однако я никогда не работал с Лифлетом, поэтому, насколько я знаю, это не сработает в этих условиях.

источник

2013-08-30 18:45:51 user1618143

Что я здесь делаю, это квадрат с кругом, вырезанным внутри. –

Неподвижное изображение над картой Листовка

ответ

Смежные вопросы