Google Maps API V3阅读KML文件

时间:2012-05-08 14:55:24

标签: javascript google-maps-api-3 kml polygon

我正在使用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。如您所见,地图无法完成加载。 kml文件是从maps.google.com中创建的自定义地图导出的。

我是否需要修改kml文件?

1 个答案:

答案 0 :(得分:2)

问题出在KmlLayer doc构造函数调用中。您必须提供可公开访问的网址,Google可以在其中检索您的kml文件。 Google处理您的kml,将其转换为叠加图块,然后将其作为您使用KmlLayer创建的new google.maps.KmlLayer(...)返回。