immagine fissa nel corso opuscolo mappa

non ho postato qui prima, ma ho letto molto, quindi spero che non trasgredire le regole ...immagine fissa nel corso opuscolo mappa

Sto cercando di inserire una sorta di immagine maschera (un quadrato nero con un foro circolare trasparente in esso) su una mappa di volantino; fa sembrare una mappa circolare visualizzata su un vecchio schermo dell'oscilloscopio ;-). Assolutamente posizionato in cima: 0px; fondo: 0px ;. Risolto, indipendente dallo zoom o dal pan.

Posso ottenere l'immagine da visualizzare, in alcuni casi posso anche ottenere la mappa per ingrandire e ingrandire il foro trasparente, posso anche premere la X per chiudere un popup su un marcatore, ma non importa quello che provo Non riesco MAI a fare in modo che i popup vengano visualizzati quando si fa clic o si tocca.

Ho provato una combinazione di zillion: utilizzando un'immagine PNG o codice SVG non elaborato, cambiando z-index, in un div o non. ho provato nello stesso contenitore, in un contenitore diverso, anche l'aggiunta al riquadro di controllo foglio:

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

L'immagine appare ok, ma l'interazione con opuscolo è corrotto, nessuna interazione popup possibile.

Se imposto lo z-index della svg su -1, la maschera non viene più visualizzata, ma viene visualizzato il popup.

fonte

2013-08-30 Mike Tommasi

Penso che il problema è che se si mette un'immagine su qualcosa d'altro, anche se l'immagine è trasparente, che copre l'elemento sottostante e rendere impossibile interagire con Sono anche curioso di vedere se qualcuno arriva con una soluzione. – Mir

Sì, non importa quale sia il contenuto, essendo un elemento quadrato che copre l'intera mappa, causerà sempre problemi. Tuttavia, ci deve essere un modo per creare una maschera ... –

Il modo più semplice probabilmente sta usando un PNG e la seguente riga di css:

puntatore-eventi: nessuno;

Rende le azioni del mouse sotto l'elemento possibile.

Vedi qui per la compatibilità IE e un po 'più di informazioni: Click through a DIV to underlying elements

fonte

2013-08-30 18:45:57 Vincent

Btw in caso di eventi puntatore: nessuno non è compatibile con il tag img, prova a mettere l'img in un div. – Vincent

Mille grazie per la tua risposta, mi hai risparmiato un sacco di tempo! Abbastanza intelligente. Funziona, anche su Android. Ho usato un div con un'immagine di sfondo e gli eventi di puntatori magici, ma poco noti: nessuno. Tuttavia non funziona su Android su un tag svg, per qualche motivo (pensavo che funzionasse in Chrome). –

Buono a sapersi ha funzionato! Strano a sentirlo su di esso non funziona su SVG su Android, soprattutto perché la proprietà proviene da svg. A proposito, potresti contrassegnare la mia risposta come accettata? – Vincent

E se invece di attaccare una maschera sulla mappa, si inserisse la mappa all'interno di un div con border-radius:50%; overflow:hidden? Non ho mai lavorato con Leaflet, quindi, per quanto ne so, non funzionerà proprio in quelle condizioni.

fonte

2013-08-30 18:45:51 user1618143

Quello che sto facendo qui è un quadrato con un cerchio ritagliato all'interno. –

immagine fissa nel corso opuscolo mappa

risposta

Problemi correlati