收录日期:2019/05/21 01:09:56 时间:2015-12-17 13:32:29 标签:css,kml,google-earth,google-earth-plugin

Just wondering if it is possible to style a pop-up balloon via an external/linked .css file, rather than inline styles ?

What I generally do is create a BalloonStyle for my placemark balloons that contains a wrapper div with a CSS class like earth-balloon, which can then be styled directly from within the containing page.

For example, the KML would look like:

<?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>

the containing page itself could look like:

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

and your styles.css could then style the balloon for Placemarks with styleUrl = #foo via rules like:

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

.earth-balloon em {
  color: red;
}

Hope that helps!

Yes I have done this in the past, it can be quite tricky. You need to use firebug to figure out the selectors you need to get and in your CSS you will have to be quite specific to override them, on occaision you might even have to use !important on the rule.

Natalie