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

Question

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

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

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

...在 Kml 地标的描述标签内，但未正确呈现。

我可以看到萤火虫只显示边距和填充的正值。它完全忽略了负边距值。所以，我想知道，对 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>

Answer 1

您遇到的问题是由于 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 样式。