我正在使用 KML Example 作为读取包含多边形的 KML 文件的指南。 kml文件包含
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<name>Neighborhood Groups</name>
<description><![CDATA[Content]]></description>
<Style id="style3">
</Style>
<Style id="style9">
</Style>
<Style id="style8">
</Style>
<Style id="style2">
</Style>
<Style id="style4">
</Style>
<Style id="style7">
</Style>
<Style id="style1">
</Style>
<Style id="style5">
</Style>
<Style id="style6">
</Style>
<Style id="style10">
</Style>
<Placemark>
<name>Neighborhood Group 1</name>
<styleUrl>#style3</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<tessellate>1</tessellate>
<coordinates>
-84.087296,35.911472,0.000000
-84.089699,35.909248,0.000000
-84.089439,35.903618,0.000000
-84.085625,35.898994,0.000000
-84.075836,35.903721,0.000000
-84.081757,35.912968,0.000000
-84.083565,35.919537,0.000000
-84.090385,35.918110,0.000000
-84.087250,35.911507,0.000000
-84.090385,35.918110,0.000000
-84.083473,35.919640,0.000000
-84.087296,35.911472,0.000000
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Neighborhood Group 2</name>
<styleUrl>#style9</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<tessellate>1</tessellate>
<coordinates>
-84.089439,35.902992,0.000000
-84.089569,35.902992,0.000000
-84.089615,35.902954,0.000000
-84.093178,35.901428,0.000000
-84.096741,35.900002,0.000000
-84.097122,35.898819,0.000000
-84.098969,35.897324,0.000000
-84.112183,35.891346,0.000000
-84.102013,35.885120,0.000000
-84.089699,35.888771,0.000000
-84.086739,35.892563,0.000000
-84.082275,35.894367,0.000000
-84.080429,35.894543,0.000000
-84.087059,35.899845,0.000000
-84.089401,35.903061,0.000000
-84.089439,35.902992,0.000000
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Neighborhood Group 3</name>
<styleUrl>#style8</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<tessellate>1</tessellate>
<coordinates>
-84.094109,35.910252,0.000000
-84.094551,35.910252,0.000000
-84.101067,35.909031,0.000000
-84.096008,35.904068,0.000000
-84.105103,35.901699,0.000000
-84.104927,35.899651,0.000000
-84.102867,35.895691,0.000000
-84.097977,35.898022,0.000000
-84.096992,35.899681,0.000000
-84.095833,35.900730,0.000000
-84.093681,35.906811,0.000000
-84.094109,35.910252,0.000000
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Neighborhood Group 4</name>
<styleUrl>#style2</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<tessellate>1</tessellate>
<coordinates>
-84.101196,35.908970,0.000000
-84.101418,35.908901,0.000000
-84.106911,35.907337,0.000000
-84.113258,35.904381,0.000000
-84.116608,35.903618,0.000000
-84.116348,35.901497,0.000000
-84.116905,35.899826,0.000000
-84.116394,35.897915,0.000000
-84.114418,35.893120,0.000000
-84.111504,35.890961,0.000000
-84.103905,35.896385,0.000000
-84.104889,35.899548,0.000000
-84.105324,35.900383,0.000000
-84.100731,35.903755,0.000000
-84.101196,35.908970,0.000000
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Neighborhood Group 5</name>
<Snippet>sdfgsdfg</Snippet>
<description><![CDATA[<div dir="ltr">sdfgsdfg</div>]]></description>
<styleUrl>#style4</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<tessellate>1</tessellate>
<coordinates>
-84.094238,35.941559,0.000000
-84.096649,35.944000,0.000000
-84.100082,35.945660,0.000000
-84.105621,35.945702,0.000000
-84.111618,35.945660,0.000000
-84.113251,35.943161,0.000000
-84.113770,35.939030,0.000000
-84.109177,35.940590,0.000000
-84.110039,35.927589,0.000000
-84.105789,35.925468,0.000000
-84.094238,35.924358,0.000000
-84.095360,35.930439,0.000000
-84.094238,35.941559,0.000000
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Neighborhood Group 6</name>
<styleUrl>#style7</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<tessellate>1</tessellate>
<coordinates>
-84.102272,35.946110,0.000000
-84.101959,35.946110,0.000000
-84.100342,35.945911,0.000000
-84.096512,35.943981,0.000000
-84.094070,35.941422,0.000000
-84.094582,35.938961,0.000000
-84.144463,35.913799,0.000000
-84.094490,35.927872,0.000000
-84.093773,35.924252,0.000000
-84.090210,35.918522,0.000000
-84.074852,35.921921,0.000000
-84.079170,35.936520,0.000000
-84.080971,35.941551,0.000000
-84.081749,35.943130,0.000000
-84.081413,35.945061,0.000000
-84.082520,35.947472,0.000000
-84.085609,35.949211,0.000000
-84.092651,35.953411,0.000000
-84.100029,35.949070,0.000000
-84.102272,35.946110,0.000000
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Neighborhood Group 7</name>
<styleUrl>#style1</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<tessellate>1</tessellate>
<coordinates>
-84.082008,35.944618,0.000000
-84.081757,35.943512,0.000000
-84.079140,35.936489,0.000000
-84.079391,35.934158,0.000000
-84.076088,35.921650,0.000000
-84.059013,35.925400,0.000000
-84.059097,35.928532,0.000000
-84.062569,35.931278,0.000000
-84.062920,35.932812,0.000000
-84.060249,35.937119,0.000000
-84.059608,35.939690,0.000000
-84.060768,35.941841,0.000000
-84.064552,35.943130,0.000000
-84.074333,35.944691,0.000000
-84.078712,35.945660,0.000000
-84.082008,35.944618,0.000000
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Neighborhood Group 8</name>
<styleUrl>#style5</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<tessellate>1</tessellate>
<coordinates>
-84.079613,35.913628,0.000000
-84.074722,35.906986,0.000000
-84.065323,35.911575,0.000000
-84.063797,35.911873,0.000000
-84.061096,35.912186,0.000000
-84.062019,35.922176,0.000000
-84.065582,35.923531,0.000000
-84.077080,35.920891,0.000000
-84.079315,35.914322,0.000000
-84.079613,35.913628,0.000000
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Neighborhood Group 9</name>
<styleUrl>#style6</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<tessellate>1</tessellate>
<coordinates>
-84.074425,35.906693,0.000000
-84.074638,35.906605,0.000000
-84.077042,35.905910,0.000000
-84.072319,35.899166,0.000000
-84.068626,35.894058,0.000000
-84.067337,35.890911,0.000000
-84.060234,35.892754,0.000000
-84.056396,35.894283,0.000000
-84.052963,35.894909,0.000000
-84.055069,35.899513,0.000000
-84.058434,35.899132,0.000000
-84.060387,35.902954,0.000000
-84.061722,35.905807,0.000000
-84.064934,35.910309,0.000000
-84.065582,35.911331,0.000000
-84.074425,35.906693,0.000000
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Neighborhood Group 17</name>
<styleUrl>#style10</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<tessellate>1</tessellate>
<coordinates>
-84.061737,35.913246,0.000000
-84.061844,35.913002,0.000000
-84.063606,35.911995,0.000000
-84.063690,35.910950,0.000000
-84.064682,35.910221,0.000000
-84.061028,35.902817,0.000000
-84.057938,35.898716,0.000000
-84.052574,35.900906,0.000000
-84.047256,35.904797,0.000000
-84.048134,35.905632,0.000000
-84.047424,35.906815,0.000000
-84.047966,35.911194,0.000000
-84.048264,35.912777,0.000000
-84.050819,35.913334,0.000000
-84.051201,35.914669,0.000000
-84.052490,35.918163,0.000000
-84.052490,35.921429,0.000000
-84.057083,35.920597,0.000000
-84.059204,35.918682,0.000000
-84.061737,35.913246,0.000000
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
</Document>
</kml>
处理它的javascript是
function initialize() {
var myLatlng = new google.maps.LatLng(35.910200,-84.085100);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
var nyLayer = new google.maps.KmlLayer(
'map.kml',
{ suppressInfoWindows: true,
map: map});
google.maps.event.addListener(nyLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content_window');
sidediv.innerHTML = text;
}
}
正在进行的全部工作在 http://cspc.net/neighborhoods/map.html 。如您所见， map 不会完成加载。正在从在 maps.google.com 中创建的自定义 map 导出 kml 文件。
我需要修改 kml 文件吗？
最佳答案
问题出在 KmlLayer doc构造函数调用。您必须提供一个可公开访问的 URL，Google 可以从中检索您的 kml 文件。 Google 处理您的 kml，将其转换为叠加图 block ，然后将其作为您使用 new google.maps.KmlLayer(...) 创建的 KmlLayer 返回。
关于javascript - Google Maps API V3 读取 KML 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10501104/