4

我正在使用 KML 和 GGeoXml 对象在嵌入式 Google 地图上叠加一些形状。KML 文件中的地标具有一些显示在气球中的自定义描述信息。

<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 来格式化弹出窗口中的内容，并且它成功了一半。

具体来说：

  • 和元素使用我在样式表中指定的颜色和背景图像呈现<h6>。<h4>

  • 一切都以 Arial 显示，而不是我在 CSS 中指定的字体。

  • 类名似乎被忽略了（例如，没有a.Button应用任何格式；如果我定义了像下面这样的样式，它将被忽略。）

      div.MapPopup { background:pink; }

有任何想法吗？CSS 根本不工作我不会感到惊讶，但奇怪的是它只部分工作。

更新

这是一个屏幕截图，可以更好地说明这一点。我已经<div class="MapPopup">在页面的下方（黄色）复制了标记，以显示它应该如何根据我的 CSS 呈现。

替代文字

4

4 回答 4

6

正如建议的那样，我已经和 Firebug 一起去看看发生了什么。看起来谷歌正在做两件令人讨厌的事情：

  1. 它正在从我的 HTML 中删除所有类属性。
  2. 它到处乱扔各种硬编码样式。

这是我的 HTML 以及 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在我的第一个div等标签Button中<a>）都已被删除。

知道了这一点，我将能够解决谷歌的干扰，使用!important和定位整个地图的容器div——尽管如此，这很烦人，而且来自谷歌的出乎意料的笨拙。

于 2008-10-16T14:56:50.790 回答
2

与 KML 块中的 HTML 相关的更多令人讨厌的问题<description>：任何链接都被赋予属性target="_blank"，无论您喜欢与否。我目前正在探索使用 jQuery 来撤消它的方法，但这太麻烦了。我真的不明白为什么 Google 觉得有必要篡改这个 HTML。

另请参阅官方 Google Group 上的此线程。

于 2008-10-17T21:18:54.153 回答
1

我有过类似的问题。我不知道你是如何实现你的标记的，或者你是否正在使用 InfoWindow 或 .addListener，但是我不得不让 css 样式在“弹出气泡”（在标记上方）内工作是为了使用所谓的“内联样式”。所以我有一个变量传递给 InfoWindow。假设您已经使用一些选项初始化了一个变量“marker”，并创建了“map”实例，一些示例代码如下所示：

/*start of myHtml2 variable*/
var myHtml2 = "<div style=\"background-color:lightgray\"><div style=\"padding:5px\"><div
style=\"font-size:1.25em\">Some text</div><div>Some more text<br/>
Yet more text<br/></div><table style=\"padding:5px\"><tr><td><img src=\"A lake.jpg\"
width=\"75px\" height=\"50px\"></td><td>More text<br/>Again, more text<br/><div
style=\"font-size:.7em\">Last text</div></td></tr></table></div></div>"
/*end of variable*/

var infowindow2 = new google.maps.InfoWindow({content: myHtml2});
 /*mouseover could be 'click', etc.*/
google.maps.event.addListener(marker, 'mouseover', function(){  
infowindow2.open(map, marker);
});

我知道 css 样式代码很麻烦，但是我还没有找到在头部使用 css 或从样式表中使用复杂 css 样式的方法 总是有冲突，有些功能没有t 正确渲染。

于 2011-08-04T22:10:24.437 回答
0

我的第一个猜测是您遇到了 CSS 特异性的问题。在http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/上有一篇很好的文章，所以如果你可以包含一个容器元素 ID，那可能会有所帮助.

如果这不是问题，请告诉我，我会想出更多的想法。

于 2008-10-15T03:25:28.520 回答