在谷歌地图 v3 中使用 css 设计 kml 样式？

我正在使用 google 地图 api v3 从 kml 文件加载一些数据。我希望在信息窗口中显示描述数据时对其进行样式设置以适合我的网页。

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

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

...在 Kml 地标的描述标签内，但它没有正确渲染它。

我可以看到 firebug 只是显示了 margin 和 padding 的正值。它完全忽略了负边距值。所以，我想知道，对 kml 文件使用 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>

您遇到的问题是由于 Api 中的内容清理造成的。清理内容是防止恶意代码执行的安全措施。

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

• JavaScript
• CSS
• <iframe> tags
• <embed> tags
• <object> tags

如果您查看调试器中的标记，您会发现实际上得到如下内容：

<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='...' with class='whatever'然后您可以在外部文件中定义 CSS 样式。