在google maps v3中使用css对kml进行样式化？ [英] Styling kml with css in google maps v3?

问题描述

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

现在我想尝试设置样式：

  style = margin-left：-20px; border：2px dotted＃897823; et-a; 
  

...在Kml地标的说明标签中，但无法正确呈现。 p>

我可以看到firebug只是显示了margin和padding的积分值。它完全忽略了负边距值。所以，我想知道，使用CSS样式属性为kml文件是否有任何限制？

 < placemark& 
< name><！[CDATA [First Office Address]]>< / name> 
< description> 
<！[CDATA [
首行信息< br> 
加利福尼亚地址< br> 
峰谷< br> 
< div class =cInfo>电话< br> 
 Office 9089YUHJT General：（2457TYGFR< / div> 
]]> 
< / description> 
< Point> 
& 137.5332200,0< / coordinate> 
< / Point> 
< / placemark> 
  

解决方案

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

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

• JavaScript


• CSS


• < iframe> 标签


• < embed> 标签


• < object> $ b

如果你看看调试器中的标记，你会看到你实际上得到了类似下面的东西：

 < div style =font-family：Arial，sans-serif; font-size：small;> 
< div id =iw_kml> 
第一行信息< br> 
加利福尼亚地址< br> 
峰谷< br> ; 
< div>电话< br> Office 9089YUHJT一般：（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'，
 {suppressInfoWindows：true，
 map：map}）; 
 
 google.maps.event.addListener（layer，'click'，function（kmlEvent）{
 showInContentWindow（kmlEvent.featureData.description）; 
}）; 
 
 function showInContentWindow（text）{
 var content =< div style ='margin-left：-20px; border：2px dotted＃897823;'& + text +< / div>; 
 var infowindow = new google.maps.InfoWindow（{
 content：content 
}）
} 
} 
  

Obvioulsy你可以用 class = style ='...' infoWindow这将允许您在外部文件中定义CSS样式。

I am using a google maps api v3 to load some data from a kml file. I wish to style the description data when it is shown in an info window to suit my web page.

Now I am trying to set the style:

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

...inside the description tag of a Kml Placemark but it is not rendering it properly.

I can see that firebug just shows up the positives values of margin and padding. It entirely ignores the negative margin values. So, I was wondering, are any limitation in using css style attributes for kml files?

<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>

解决方案

The issue you are having is due to Content scrubbing in the Api. Scrubbing the contents is a security measure to prevent malicious code from executing.

When a feature balloon's description contents are scrubbed, the following code is removed:

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

If you take a look at the markup in a debugger you will see that you are actually getting something like the following:

<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>

You don't say how you are opening the info windows, but something like the following should work for you. Basically you suppress the default info window and then build your own custom one.

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',
      { suppressInfoWindows: true,
         map: map });

  google.maps.event.addListener(layer, 'click', function(kmlEvent) {
    showInContentWindow(kmlEvent.featureData.description);
  });

  function showInContentWindow(text) {
    var content = "<div style='margin-left:-20px;border:2px dotted #897823;'>" + text + "</div>";
    var infowindow = new google.maps.InfoWindow({
        content: content 
    })
  }
}

Obvioulsy you can replace style='...' with class="infoWindow" which would then allow you to define the CSS style in an external file.

这篇关于在google maps v3中使用css对kml进行样式化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！