GoogleMaps V3 KML PlaceMark StyleURL更改 [英] GoogleMaps V3 KML PlaceMark StyleURL change
问题描述
我目前正在使用GoogleMaps V3 API。我正在加载以下KML：
<？xml version =1.0encoding =UTF-8？ >
< kml xmlns =http://www.opengis.net/kml/2.2xmlns：gx =http://www.google.com/kml/ext/2.2xmlns：kml = http://www.opengis.net/kml/2.2xmlns：atom =http://www.w3.org/2005/Atom>
<文件>< 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; /字体&安培; GT;
& lt; table border ='1'padding ='1'& gt; $ [description]& lt; / table& gt;
< / text>
< / BalloonStyle>
< / Style>< Style id =grey>
< 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; /字体&安培; 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>
<名称>< /名称>
< description>< / description>
<知名度> 1< / visibility>
< open> 0< / open>
< Polygon>
< extrude> 1< / extrude>
< tessellate> 1< / tessellate>
< altitudeMode> clampedToGround< / altitudeMode>
< outerBoundaryIs>
< LinearRing>
将坐标> 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的颜色更改为灰色地点标记。
我能够捕捉到click事件，但是我找不到如何在加载后更改样式：
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
}）;
使用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 $ b geoxml_v3：
http://code.google.com/p/geoxml-v3/
另一种选择是使用FusionTablesLayer，它可以是动态的盟友风格，可以从kml
填充
I'm currently working with the GoogleMaps V3 API. And I'm loading the following 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>
<font font size='3' color="#aa0000"><b>$[name]</b></font>
<table border='1' padding='1'>$[description]</table>
</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>
<font font size='3' color="#aa0000"><b>$[name]</b></font>
<table border='1' padding='1'>$[description]</table>
</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>
What I wan't to achieve is to change the color of a PlaceMarker to gray on click on the placemarker.
I am able to catch the click event, but I can't find how to change the style after load:
google.maps.event.addListener(_kml_layer, "click", function(obj) {
alert(obj.featureData.id);
});
The _kml_layer is defined by the following function:
_kml_layer = new google.maps.KmlLayer(
'http://www.mydomain.com/mykml.kml',
{
suppressInfoWindows : true,
map : _map
});
With KmlLayer you can't change the style after load (with the API as currently documented). You either need to make a second KmlLayer with the new style and load that or use a third party kml parser (like geoxml3 or geoxml_v3) which converts kml into native google maps api objects, which you can change.
geoxml3: http://code.google.com/p/geoxml3/
Here is an example using geoxml3 that changes two of the three placemark icons on mouseover: 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/
Another option would be to use a FusionTablesLayer, which can be dynamically styled and which can be populated from kml
这篇关于GoogleMaps V3 KML PlaceMark StyleURL更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
