在Google Maps v3中使用CSS来样式化KML？

Question

在Google Maps v3中使用CSS来样式化KML？

3

我将使用 Google 地图 API v3 从 KML 文件中加载一些数据。当信息窗口显示描述数据时，我希望能够根据我的网页进行样式设置。

现在我正在尝试设置样式：

style="margin-left:-20px;border:2px dotted #897823; et-a;"

我看到在Kml Placemark的描述标签内有css样式，但它并没有正确地呈现出来。

我发现firebug只显示margin和padding的正值，完全忽略了负值。所以，我想知道，在使用css样式属性时是否存在任何限制？

<placemark>
 <name><![CDATA[First Office Address]]></name>
    <description>
      <![CDATA[
        First Line Information<br> 
        California addresss<br>
        Peak valley<br> 
        <div class="cInfo">Telephone<br>
        Office 9089YUHJT General: (2457TYGFR</div>
      ]]>
    </description>
    <Point>
      <coordinates>-420.2300,137.5332200,0</coordinates>    
    </Point>
</placemark>

- Mike

你能提供更多的上下文信息吗？特别是展示描述元素内部的div以及描述元素的父级元素。 - LarsH

我有类似这样的内容： <description> <![CDATA[第一行信息<br> 加利福尼亚地址<br> Peak Valley<br> <div class="cInfo">电话<br>办公室 9089YUHJT 总机：（2457TYGFR</div> ]]></description> - Mike

请在您的评论中编辑KML（格式化），并确保它包括描述元素的父元素。 - LarsH

这是一个建议，告诉你如何让你向寻求帮助的人更清楚地表达你的情况。到目前为止，你似乎没有得到任何帮助。然而，我不会替你承担责任。 - LarsH

@Fraser，这些话很重要，但我认为为了回答OP的问题，我们必须详细确定什么被支持。 "就像在任何WebKit浏览器中一样"表明CSS得到了支持（再次，“大多数”），而OP的经验（以及您的代码）表明其中一些得到了支持。 - LarsH

显示剩余6条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fraser · Accepted Answer

你遇到的问题是由API中的内容清洗引起的。清洗内容是一项安全措施，以防止恶意代码执行。

当功能气球的描述内容被清洗时，以下代码将被删除：

- JavaScript - CSS - <iframe> 标签 - <embed> 标签 - <object> 标签

如果你在调试器中查看标记，你会发现你实际上得到了类似以下的内容：

<div style="font-family: Arial,sans-serif; font-size: small;">
    <div id="iw_kml">
      First Line Information<br> 
      California addresss<br>
      Peak valley<br> 
      <div>Telephone<br>Office 9089YUHJT General: (2457TYGFR</div> 
    </div>
</div>

你没有说你是怎么打开信息窗口的，但是以下类似的代码应该适用于你。基本上你需要禁止默认的信息窗口然后构建你自己的自定义窗口。

function initialize() {
    var myLatlng = new google.maps.LatLng(0, 0);
    var myOptions = {
        zoom: 12,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(
        document.getElementById("map_canvas"),
        myOptions
    );

    var layer = new google.maps.KmlLayer(
        'http://www.yourserver.com/some.kml', {
            // prevent default behaviour
            suppressInfoWindows: true, 
            map: map
        }
    );

    // bind the event handler
    google.maps.event.addListener(layer, 'click', function(kmlEvent) {
        showInfoWindow(kmlEvent.featureData.description);
    });

    // show a custom info window
    function showInfoWindow(text) {
        // build your window using whatever, styles, embeds or scripts
        // you like. Anything included here will bypass content scrubbing
        var content = "<div style='margin-left:-20px;border:2px dotted #897823;'>" + text + "</div>";
        var infowindow = new google.maps.InfoWindow({
            content: content
        })
    }
}

显然你可以将style='...'替换为class='whatever'，这样你就可以在外部文件中定义CSS样式。