Google地图信息框中的CSS格式如何工作？ [英] How does CSS formatting in a Google Maps bubble work?

问题描述

我使用KML和GGeoXml对象在嵌入的Google地图上重叠一些形状。

I'm using KML and the GGeoXml object to overlay some shapes on an embedded Google map. The placemarks in the KML file have some custom descriptive information that shows up in the balloons.

<Placemark>
    <name />
    <description>
        <![CDATA[
            <div class="MapPopup">
                <h6>Concession</h6>
                <h4>~Name~</h4>
                <p>Description goes here</p>
                <a class="Button GoRight FloatRight" href="#"><span></span>View details</a>
            </div>
        ]]>
    </description>
    <styleUrl>#masterPolyStyle</styleUrl>
    ...Placemarks go here ...
</Placemark>

到目前为止很好 - 弹出窗口显示并且正确的文本。这里有奇怪的事情：我试图使用CSS格式化弹出窗口中的内容，它一半工程。

So far so good - the popups show up and have the correct text in them. Here's the weird thing: I'm trying to use CSS to format what goes in the popups, and it halfway works.

具体：

• < h6&

> 和和 元素使用我在样式表中指定的颜色和背景图片呈现。
• 一切都显示在Arial中，而不是我在CSS中指定的字体。



• 类名似乎被忽略$ c> a.Button 格式化;如果我定义一个类似下面的样式，它被忽略。）

• The <h6> and <h4> elements are rendered using the colors and background images I've specified in my stylesheet.
• Everything shows up in Arial, not in the font I've specified in my CSS.

• The class names seem to be ignored (e.g. none of the a.Button formatting is applied; if I define a style like the one below, it's ignored.)

div.MapPopup { background:pink; }

我不会惊讶于CSS不工作，但它是奇怪的，它只是部分工作。

Any ideas? I wouldn't have been surprised for the CSS not to work at all, but it's weird that it only partly works.

这里有一个屏幕截图，我已经再现了页面上的< div class =MapPopup> 标记（黄色），以显示它应该如何根据我的CSS

Here's a screenshot to better illustrate this. I've reproduced the <div class="MapPopup"> markup further down on the page (in yellow), to show how it should be rendered according to my CSS.

推荐答案

正如我建议我使用Firebug来看看发生了什么。看起来Google正在做两件令人讨厌的事情：

As suggested I've gone in with Firebug to see what's going on. It looks like Google is doing two obnoxious things:

1. 它从我的HTML中剥离所有类属性。


2. 它扔各种硬编码风格。

这是我的HTML以及Google插入的第一对包装器：

Here's my HTML along with the first couple of wrappers inserted by Google:

<div style="font-family: Arial,sans-serif; font-size: small;">
    <div id="iw_kml">
        <div>
            <h6>Concession</h6>
            <h4>BOIS KASSA 1108000 (Mobola-Mbondo)</h4>
            <p>
                Description goes here</p>
            <a target="_blank"><span />View details </a>
        </div>
    </div>
</div>

正如你所看到的，我的类（例如 MapPopup < a> 中的第一个 div ， Button code> tag）都被删除了。

As you can see, my classes (e.g. MapPopup in my first div, Button etc. in the <a> tag) have all been stripped out.

知道这一点，我将能够使用！important 解决Google的干扰，并定位容器 div 为整个地图 - 静态，这是令人讨厌，从Google意外笨拙。

Knowing this I'll be able to work around Google's interference, using !important and targeting the container div for the whole map - still, this is annoying, and unexpectedly clumsy coming from Google.

这篇关于Google地图信息框中的CSS格式如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！