2009-07-29 8 views
3

Je me demandais simplement s'il était possible de styliser un ballon pop-up via un fichier externe/lié .css, plutôt que des styles en ligne?CSS dans Google Earth plugin

Répondre

0

Oui, je l'ai fait dans le passé, cela peut être assez difficile. Vous devez utiliser firebug pour trouver les sélecteurs dont vous avez besoin et dans votre CSS vous devrez être assez spécifique pour les remplacer, vous devrez peut-être même utiliser! Important sur la règle.

Natalie

+0

C'est très bien, comment est-ce que je ferais ça, où le fichier externe doit-il être lié? N'importe quel exemple de comment vous pouvez me pointer aussi. ce qui concerne. .k – Keet

+0

[Ceci] (http://www.recyclenow.com/applications/recyclenow_08/banklocator/search_results.rm?place=bn1+4aj&x=29&y=16) est quelque chose sur lequel j'ai travaillé il y a longtemps. changé un peu, mais devrait vous donner une idée, jetez un oeil au code dans firebug et à banklocator.css –

+0

heh ressemble à vous ne pouvez pas mettre html dans les commentaires, seulement dans les réponses :) - l'URL est http: //www.recyclenow .com/applications/recyclenow_08/banklocator/search_results.rm? lieu = bn1 + 4aj & x = 29 & y = 16 –

3

Ce que je fais en général est de créer un BalloonStyle pour mes ballons placemark qui contient une enveloppe div avec une classe CSS comme earth-balloon, qui peut alors être directement à partir de style dans la page contenant.

Par exemple, le KML ressemblerait à ceci:

<?xml version="1.0" encoding="UTF-8"?> 
<kml xmlns="http://www.opengis.net/kml/2.2"> 
    <Document> 
    <Style id="foo"> 
     <BalloonStyle> 
     <text><![CDATA[ 
     <div class="earth-balloon"> 
      $[description] 
     </div> 
     ]]></text> 
     </BalloonStyle> 
    </Style> 
    <Placemark> 
     <styleUrl>#foo</styleUrl> 
     <name>Bar</name> 
     <description><![CDATA[ 
     Some <em>HTML</em> here. 
     ]]></description> 
     <Point> 
     <coordinates>-122,37</coordinates> 
     </Point> 
    </Placemark> 
    </Document> 
</kml> 

la page contenant lui-même pourrait ressembler à:

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="styles.css"/> 
    <!-- Earth API stuff goes here --> 
</head> 
<body> 
    <div id="map3d"></div> 
</body> 
</html> 

et votre styles.css pourrait alors le style le ballon pour Placemarks avec styleUrl = #foo par des règles comme :

.earth-balloon { 
    font-family: Georgia, serif; 
} 

.earth-balloon em { 
    color: red; 
} 

Hope that helps!

Questions connexes