Question

我正在使用google maps 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>

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样式。

使用谷歌地图v3中的CSS设置kml？

1 个答案: