Come posso posizionare un div html sul plug-in di Google Earth? Coinvolge wmode, immagino

Question

Ho problemi ponendo un div html sul plug-in di Google Earth in un'applicazione Web, qualsiasi aiuto sarebbe apprezzato.

Va bene per Map, il terreno e la modalità ibrida, ma in modalità 'terra', il Flash calci strati dentro e automaticamente la mappa in alto.

L'indicizzazione Z non è d'aiuto.

Presumibilmente avrei potuto fare qualcosa di simile:

document.getElementById('flashDiv').setAttribute('wmode', 'opaque'); 

ma dato che la roba di Google viene compilato al volo, lo rende molto più difficile. La visualizzazione del codice generato non ha aiutato qui. Ancora una volta, a causa della sua compilazione al volo, cose come SWFObject non possono salvare il giorno ...

Qualcuno ha riscontrato qualcosa di simile? Ho passato la mattinata a trascinare il gruppo di API di Google Earth senza troppi vantaggi.

Aggiornamento: dopo ulteriori tiri, la risposta potrebbe trovarsi con un iframe shim. Potrei anche essere arrivato alla conclusione che il plugin è basato su Flash. Indagare ...

alt text http://neilsimonmckeown.googlepages.com/overlay.jpg

Answer 1

ho messo insieme una demo che mostra come utilizzare IFRAME spessori qui:

http://earth-api-samples.googlecode.com/svn/trunk/demos/customcontrols/index.html

Answer 2

Se si tratta di un plugin, allora non si può mettere in modo affidabile gli altri elementi sopra la parte superiore di esso. I browser di solito lasciano andare la maggior parte della loro capacità di 'strato' elementi quando sono coinvolti i plugin.

Immagino che un Iframe possa essere un modo per aggirarlo, purché si verifichi che questo funzioni ancora sulla maggior parte dei browser.

Answer 3

Dopo aver esaminato il modo in cui Google ha incorporato il codice, sembra che sia con un iFrame. Tuttavia, se stai riscontrando problemi con un flash, vedi sotto ...

In simili situazioni, cercando di visualizzare una navigazione a discesa su un elemento flash (o html su un video di YouTube). C'erano alcuni fattori che entrarono in gioco.

Il primo era il mio elemento html che volevo passare con il mouse sopra l'elemento flash doveva essere un elemento html di pari livello con le proprietà css impostate per ciascun elemento di pari livello e anche per il genitore div. Così, per esempio:

<div id="parent"> 
    <div id="sibling"></div> 
    <embed id=”flash”><other script code></embed> 
</div> 

Allora il mio css sarebbe

//.parent may not need to be set to relative 
#parent { position: relative; } 
// the value on sibling1 just needs to be higher than .sibling2 
#sibling { position: relative; z-index: 20; } 
#flash { position: relative; z-index: 10; display:inline } 

L'altra cosa degna di nota è il flash deve avere il parametro wmode impostato su trasparente.

Questo trucco ha funzionato per varie applicazioni flash e video di YouTube - il trucco è assicurarsi che l'html che si desidera visualizzare sul flash sia un elemento fratello del codice flash effettivo e non del div genitore, la z -index per l'html da visualizzare sopra il flash è maggiore dell'elemento flash, entrambi gli elementi html hanno il loro posizionamento impostato su relativo o assoluto e il parametro wmode è impostato su trasparente.

Speriamo che questo aiuti, ma la mia ipotesi è che il problema è con l'iFrame.

Answer 4

Non esiste un supporto diretto per la sovrapposizione di "z-indexing" a div in Api o Dom. Il plug-in carica un file eseguibile che, in termini molto semplici, fa un buco nella finestra del browser. L'uso della tecnica 'iframe shim' è la soluzione standard, anche se la trasparenza può essere complicata.

C'è un open Feature request per questa funzionalità da aggiungere all'appa - la sezione commenti ha alcune buone informazioni e collegamenti.

Inoltre, v'è una grande linea demo of this here

Answer 5

set "iframe" z-index a 100

e imposta div che viene visualizzato in alto z-index a 200 (div deve essere almeno relativo alla posizione)