GoogleMaps V3 KML PlaceMark StyleURL更改

时间:2012-06-04 09:44:40

标签: javascript google-maps

我目前正在使用GoogleMaps V3 API。我正在加载以下KML:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document><Style id="red">
  <LineStyle>
    <color>e2001aFF</color>
    <width>1</width>
  </LineStyle>
  <PolyStyle>
    <color>e2001acc</color>
    <fill>1</fill>
  </PolyStyle>
  <BalloonStyle>
    <bgColor>ffffffff</bgColor>
    <text>
                            &lt;font font size='3' color="#aa0000"&gt;&lt;b&gt;$[name]&lt;/b&gt;&lt;/font&gt;
                            &lt;table border='1' padding='1'&gt;$[description]&lt;/table&gt;                  
                       </text>
  </BalloonStyle>
</Style><Style id="gray">
  <LineStyle>
    <color>666666FF</color>
    <width>1</width>
  </LineStyle>
  <PolyStyle>
    <color>cccccccc</color>
    <fill>1</fill>
  </PolyStyle>
  <BalloonStyle>
    <bgColor>ffffffff</bgColor>
    <text>
                            &lt;font font size='3' color="#aa0000"&gt;&lt;b&gt;$[name]&lt;/b&gt;&lt;/font&gt;
                            &lt;table border='1' padding='1'&gt;$[description]&lt;/table&gt;                  
                       </text>
  </BalloonStyle>
</Style><name>KML</name><Placemark id="5473">
  <Snippet maxLines="0"></Snippet>
  <name></name>
  <description></description>
  <visibility>1</visibility>
  <open>0</open>
  <Polygon>
    <extrude>1</extrude>
    <tessellate>1</tessellate>
    <altitudeMode>clampedToGround</altitudeMode>
    <outerBoundaryIs>
      <LinearRing>
        <coordinates>5.54377026975101,51.6529393188121,0 5.54235383140039,51.6401639644859,0 5.53873941603147,51.6354393533086,0 5.53313983380098,51.6352371598686,0 5.53109711126943,51.6324409224198,0 5.52737786126051,51.6324813956187,0 5.52260612519502,51.6307520918321,0 5.51872075256068,51.6322363340599,0 5.51736992027453,51.6316246096909,0 5.51484051209933,51.6325529212478,0 5.51142301311675,51.6346650281583,0 5.51056937640636,51.6341534949811,0 5.50849516823445,51.634713720177,0 5.50639250193852,51.6343571115019,0 5.50606525074908,51.6362594682684,0 5.49722704729733,51.6265043908797,0 5.46737140246617,51.6425173978967,0 5.42182366459901,51.6543409225039,0 5.42437999474141,51.6560175383335,0 5.42661087246537,51.6554954605812,0 5.43004089768112,51.6592736942533,0 5.43163811861903,51.6609457181974,0 5.43165069241378,51.6634400858201,0 5.43400899528993,51.6642654325698,0 5.43709542035706,51.6646638722533,0 5.44492487842012,51.6642912329926,0 5.44573674258826,51.6661636919472,0 5.4489840685884,51.6698962431202,0 5.45900781447863,51.6917003092576,0 5.4607098223104,51.6897436062354,0 5.46973551245956,51.6895883044489,0 5.46923994357604,51.6914530469315,0 5.4707388732589,51.691761698608,0 5.47831558751497,51.7015861823258,0 5.48458009605862,51.7018910935235,0 5.49211917579361,51.7059403621055,0 5.50347583796229,51.6934008340147,0 5.50205171042708,51.6901914509596,0 5.49762079494402,51.6850245556145,0 5.49108009295296,51.6774498385961,0 5.48603420879267,51.6715509606335,0 5.50117534805849,51.6655353570913,0 5.50085686840637,51.6595932268782,0 5.51334569323478,51.6586174823159,0 5.52070245822274,51.6631783875663,0 5.52147513937071,51.6732045469624,0 5.53323861625654,51.66639133756,0 5.54377026975101,51.6529393188121,0 </coordinates>
      </LinearRing>
    </outerBoundaryIs>
  </Polygon>
  <styleUrl>#red</styleUrl>
</Placemark></Document></kml>

我要实现的目标是在点击地标时将PlaceMarker的颜色更改为灰色。

我能够捕获点击事件,但我无法在加载后找到如何更改样式:

google.maps.event.addListener(_kml_layer, "click", function(obj) { 
        alert(obj.featureData.id);
    });

_kml_layer由以下函数定义:

_kml_layer = new google.maps.KmlLayer(
                    'http://www.mydomain.com/mykml.kml', 
                    {
                        suppressInfoWindows : true,
                        map : _map
                    });

1 个答案:

答案 0 :(得分:1)

使用KmlLayer,您无法在加载后更改样式(使用当前记录的API)。您需要使用新样式制作第二个KmlLayer并加载它或使用第三方kml解析器(如geoxml3或geoxml_v3)将kml转换为可以更改的本机google maps api对象。

geoxml3: http://code.google.com/p/geoxml3/

以下是使用geoxml3更改鼠标悬停时三个地标图标中的两个的示例: http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_stylemap_marker.html?filename=http://www.geocodezip.com/geoxml3_test/rollover_kml.xml

geoxml_v3: http://code.google.com/p/geoxml-v3/

另一种选择是使用FusionTablesLayer,它可以动态设置风格,可以从kml填充