如何在我的代码中使用kml文件

时间:2010-03-20 10:28:58

标签: javascript google-maps kml

我下载了一个kml文件:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <Style id="transGreenPoly">
      <LineStyle>
        <width>1.5</width>
      </LineStyle>
      <PolyStyle>
        <color>7d00ff00</color>
      </PolyStyle>
    </Style>
    <Style id="transYellowPoly">
      <LineStyle>
        <width>1.5</width>
      </LineStyle>
      <PolyStyle>
        <color>7d00ffff</color>
      </PolyStyle>
    </Style>
    <Style id="transRedPoly">
      <LineStyle>
        <width>1.5</width>
      </LineStyle>
      <PolyStyle>
        <color>7d0000ff</color>
      </PolyStyle>
    </Style>
    <Style id="transBluePoly">
      <LineStyle>
        <width>1.5</width>
      </LineStyle>
      <PolyStyle>
        <color>7dff0000</color>
      </PolyStyle>
    </Style>
    <Folder>
      <name>Placemarks</name>
      <open>0</open>
      <Placemark>
        <name>Simple placemark</name>
        <description>Attached to the ground. Intelligently places itself at the height of the
          underlying terrain.</description>
        <Point>
          <coordinates>-122.0822035425683,37.42228990140251,0</coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>Descriptive HTML</name>
        <description><![CDATA[Click on the blue link!<br/><br/>
Placemark descriptions can be enriched by using many standard HTML tags.<br/>
For example:
<hr/>
Styles:<br/>
<i>Italics</i>, 
<b>Bold</b>, 
<u>Underlined</u>, 
<s>Strike Out</s>, 
subscript<sub>subscript</sub>, 
superscript<sup>superscript</sup>, 
<big>Big</big>, 
<small>Small</small>, 
<tt>Typewriter</tt>, 
<em>Emphasized</em>, 
<strong>Strong</strong>, 
<code>Code</code>
<hr/>
Fonts:<br/> 
<font color="red">red by name</font>, 
<font color="#408010">leaf green by hexadecimal RGB</font>
<br/>
<font size=1>size 1</font>, 
<font size=2>size 2</font>, 
<font size=3>size 3</font>, 
<font size=4>size 4</font>, 
<font size=5>size 5</font>, 
<font size=6>size 6</font>, 
<font size=7>size 7</font>
<br/>
<font face=times>Times</font>, 
<font face=verdana>Verdana</font>, 
<font face=arial>Arial</font><br/>
<hr/>
Links: 
<br/>
<a href="http://earth.google.com/">Google Earth!</a>
<br/>
 or:  Check out our website at www.google.com
<hr/>
Alignment:<br/>
<p align=left>left</p>
<p align=center>center</p>
<p align=right>right</p>
<hr/>
Ordered Lists:<br/>
<ol><li>First</li><li>Second</li><li>Third</li></ol>
<ol type="a"><li>First</li><li>Second</li><li>Third</li></ol>
<ol type="A"><li>First</li><li>Second</li><li>Third</li></ol>
<hr/>
Unordered Lists:<br/>
<ul><li>A</li><li>B</li><li>C</li></ul>
<ul type="circle"><li>A</li><li>B</li><li>C</li></ul>
<ul type="square"><li>A</li><li>B</li><li>C</li></ul>
<hr/>
Definitions:<br/>
<dl>
<dt>Google:</dt><dd>The best thing since sliced bread</dd>
</dl>
<hr/>
Centered:<br/><center>
Time present and time past<br/>
Are both perhaps present in time future,<br/>
And time future contained in time past.<br/>
If all time is eternally present<br/>
All time is unredeemable.<br/>
</center>
<hr/>
Block Quote:
<br/>
<blockquote>
We shall not cease from exploration<br/>
And the end of all our exploring<br/>
Will be to arrive where we started<br/>
And know the place for the first time.<br/>
<i>-- T.S. Eliot</i>
</blockquote>
<br/>
<hr/>
Headings:<br/>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h3>Header 4</h4>
<h3>Header 5</h5>
<hr/>
Images:<br/>
<i>Remote image</i><br/>
<img src="http://code.google.com/apis/kml/documentation/googleSample.png"><br/>
<i>Scaled image</i><br/>
<img src="http://code.google.com/apis/kml/documentation/googleSample.png" width=100><br/>
<hr/>
Simple Tables:<br/>
<table border="1" padding="1">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
</table>
<br/>]]></description>
        <Point>
          <coordinates>-122,37,0</coordinates>
        </Point>
      </Placemark>
    </Folder>
    <Folder>
      <name>Google Campus - Polygons</name>
      <open>0</open>
      <description>A collection showing how easy it is to create 3-dimensional buildings</description>
      <Placemark>
        <name>Building 40</name>
        <styleUrl>#transRedPoly</styleUrl>
        <Polygon>
          <extrude>1</extrude>
          <altitudeMode>relativeToGround</altitudeMode>
          <outerBoundaryIs>
            <LinearRing>
              <coordinates> -122.0848938459612,37.42257124044786,17
                -122.0849580979198,37.42211922626856,17 -122.0847469573047,37.42207183952619,17
                -122.0845725380962,37.42209006729676,17 -122.0845954886723,37.42215932700895,17
                -122.0838521118269,37.42227278564371,17 -122.083792243335,37.42203539112084,17
                -122.0835076656616,37.42209006957106,17 -122.0834709464152,37.42200987395161,17
                -122.0831221085748,37.4221046494946,17 -122.0829247374572,37.42226503990386,17
                -122.0829339169385,37.42231242843094,17 -122.0833837359737,37.42225046087618,17
                -122.0833607854248,37.42234159228745,17 -122.0834204551642,37.42237075460644,17
                -122.083659133885,37.42251292011001,17 -122.0839758438952,37.42265873093781,17
                -122.0842374743331,37.42265143972521,17 -122.0845036949503,37.4226514386435,17
                -122.0848020460801,37.42261133916315,17 -122.0847882750515,37.42256395055121,17
                -122.0848938459612,37.42257124044786,17 </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
      <Placemark>
        <name>Building 41</name>
        <styleUrl>#transBluePoly</styleUrl>
        <Polygon>
          <extrude>1</extrude>
          <altitudeMode>relativeToGround</altitudeMode>
          <outerBoundaryIs>
            <LinearRing>
              <coordinates> -122.0857412771483,37.42227033155257,17
                -122.0858169768481,37.42231408832346,17 -122.085852582875,37.42230337469744,17
                -122.0858799945639,37.42225686138789,17 -122.0858860101409,37.4222311076138,17
                -122.0858069157288,37.42220250173855,17 -122.0858379542653,37.42214027058678,17
                -122.0856732640519,37.42208690214408,17 -122.0856022926407,37.42214885429042,17
                -122.0855902778436,37.422128290487,17 -122.0855841672237,37.42208171967246,17
                -122.0854852065741,37.42210455874995,17 -122.0855067264352,37.42214267949824,17
                -122.0854430712915,37.42212783846172,17 -122.0850990714904,37.42251282407603,17
                -122.0856769818632,37.42281815323651,17 -122.0860162273783,37.42244918858723,17
                -122.0857260327004,37.42229239604253,17 -122.0857412771483,37.42227033155257,17
              </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
      <Placemark>
        <name>Building 42</name>
        <styleUrl>#transGreenPoly</styleUrl>
        <Polygon>
          <extrude>1</extrude>
          <altitudeMode>relativeToGround</altitudeMode>
          <outerBoundaryIs>
            <LinearRing>
              <coordinates> -122.0857862287242,37.42136208886969,25
                -122.0857312990603,37.42136935989481,25 -122.0857312992918,37.42140934910903,25
                -122.0856077073679,37.42138390166565,25 -122.0855802426516,37.42137299550869,25
                -122.0852186221971,37.42137299504316,25 -122.0852277765639,37.42161656508265,25
                -122.0852598189347,37.42160565894403,25 -122.0852598185499,37.42168200156,25
                -122.0852369311478,37.42170017860346,25 -122.0852643957828,37.42176197982575,25
                -122.0853239032746,37.42176198013907,25 -122.0853559454324,37.421852864452,25
                -122.0854108752463,37.42188921823734,25 -122.0854795379357,37.42189285337048,25
                -122.0855436229819,37.42188921797546,25 -122.0856260178042,37.42186013499926,25
                -122.085937287963,37.42186013453605,25 -122.0859428718666,37.42160898590042,25
                -122.0859655469861,37.42157992759144,25 -122.0858640462341,37.42147115002957,25
                -122.0858548911215,37.42140571326184,25 -122.0858091162768,37.4214057134039,25
                -122.0857862287242,37.42136208886969,25 </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
      <Placemark>
        <name>Building 43</name>
        <styleUrl>#transYellowPoly</styleUrl>
        <Polygon>
          <extrude>1</extrude>
          <altitudeMode>relativeToGround</altitudeMode>
          <outerBoundaryIs>
            <LinearRing>
              <coordinates> -122.0844371128284,37.42177253003091,19
                -122.0845118855746,37.42191111542896,19 -122.0850470999805,37.42178755121535,19
                -122.0850719913391,37.42143663023161,19 -122.084916406232,37.42137237822116,19
                -122.0842193868167,37.42137237801626,19 -122.08421938659,37.42147617161496,19
                -122.0838086419991,37.4214613409357,19 -122.0837899728564,37.42131306410796,19
                -122.0832796534698,37.42129328840593,19 -122.0832609819207,37.42139213944298,19
                -122.0829373621737,37.42137236399876,19 -122.0829062425667,37.42151569778871,19
                -122.0828502269665,37.42176282576465,19 -122.0829435788635,37.42176776969635,19
                -122.083217411188,37.42179248552686,19 -122.0835970430103,37.4217480074456,19
                -122.0839455556771,37.42169364237603,19 -122.0840077894637,37.42176283815853,19
                -122.084113587521,37.42174801104392,19 -122.0840762473784,37.42171341292375,19
                -122.0841447047739,37.42167881534569,19 -122.084144704223,37.42181720660197,19
                -122.0842503333074,37.4218170700446,19 -122.0844371128284,37.42177253003091,19
              </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
    </Folder>
    <Folder>
      <name>LineString</name>
      <open>0</open>
      <Placemark>
        <LineString>
          <tessellate>1</tessellate>
          <coordinates> -112.0814237830345,36.10677870477137,0 -112.0870267752693,36.0905099328766,0
          </coordinates>
        </LineString>
      </Placemark>
    </Folder>
    <Folder>
      <name>GroundOverlay</name>
      <open>0</open>
      <GroundOverlay>
        <name>Large-scale overlay on terrain</name>
        <description>Overlay shows Mount Etna erupting on July 13th, 2001.</description>
        <Icon>
          <href>http://code.google.com/apis/kml/documentation/etna.jpg</href>
        </Icon>
        <LatLonBox>
          <north>37.91904192681665</north>
          <south>37.46543388598137</south>
          <east>15.35832653742206</east>
          <west>14.60128369746704</west>
        </LatLonBox>
      </GroundOverlay>
    </Folder>
    <Folder>
      <name>ScreenOverlays</name>
      <open>0</open>
      <ScreenOverlay>
        <name>screenoverlay_dynamic_top</name>
        <visibility>0</visibility>
        <Icon>
          <href>http://code.google.com/apis/kml/documentation/dynamic_screenoverlay.jpg</href>
        </Icon>
        <overlayXY x="0" y="1" xunits="fraction" yunits="fraction"/>
        <screenXY x="0" y="1" xunits="fraction" yunits="fraction"/>
        <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/>
        <size x="1" y="0.2" xunits="fraction" yunits="fraction"/>
      </ScreenOverlay>
      <ScreenOverlay>
        <name>screenoverlay_dynamic_right</name>
        <visibility>0</visibility>
        <Icon>
          <href>http://code.google.com/apis/kml/documentation/dynamic_right.jpg</href>
        </Icon>
        <overlayXY x="1" y="1" xunits="fraction" yunits="fraction"/>
        <screenXY x="1" y="1" xunits="fraction" yunits="fraction"/>
        <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/>
        <size x="0" y="1" xunits="fraction" yunits="fraction"/>
      </ScreenOverlay>
      <ScreenOverlay>
        <name>Simple crosshairs</name>
        <visibility>0</visibility>
        <description>This screen overlay uses fractional positioning to put the image in the exact
          center of the screen</description>
        <Icon>
          <href>http://code.google.com/apis/kml/documentation/crosshairs.png</href>
        </Icon>
        <overlayXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
        <screenXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
        <rotationXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
        <size x="0" y="0" xunits="pixels" yunits="pixels"/>
      </ScreenOverlay>
      <ScreenOverlay>
        <name>screenoverlay_absolute_topright</name>
        <visibility>0</visibility>
        <Icon>
          <href>http://code.google.com/apis/kml/documentation/top_right.jpg</href>
        </Icon>
        <overlayXY x="1" y="1" xunits="fraction" yunits="fraction"/>
        <screenXY x="1" y="1" xunits="fraction" yunits="fraction"/>
        <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/>
        <size x="0" y="0" xunits="fraction" yunits="fraction"/>
      </ScreenOverlay>
      <ScreenOverlay>
        <name>screenoverlay_absolute_topleft</name>
        <visibility>0</visibility>
        <Icon>
          <href>http://code.google.com/apis/kml/documentation/top_left.jpg</href>
        </Icon>
        <overlayXY x="0" y="1" xunits="fraction" yunits="fraction"/>
        <screenXY x="0" y="1" xunits="fraction" yunits="fraction"/>
        <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/>
        <size x="0" y="0" xunits="fraction" yunits="fraction"/>
      </ScreenOverlay>
      <ScreenOverlay>
        <name>screenoverlay_absolute_bottomright</name>
        <visibility>0</visibility>
        <Icon>
          <href>http://code.google.com/apis/kml/documentation/bottom_right.jpg</href>
        </Icon>
        <overlayXY x="1" y="-1" xunits="fraction" yunits="fraction"/>
        <screenXY x="1" y="0" xunits="fraction" yunits="fraction"/>
        <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/>
        <size x="0" y="0" xunits="fraction" yunits="fraction"/>
      </ScreenOverlay>
      <ScreenOverlay>
        <name>screenoverlay_absolute_bottomleft</name>
        <visibility>0</visibility>
        <Icon>
          <href>http://code.google.com/apis/kml/documentation/bottom_left.jpg</href>
        </Icon>
        <overlayXY x="0" y="-1" xunits="fraction" yunits="fraction"/>
        <screenXY x="0" y="0" xunits="fraction" yunits="fraction"/>
        <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/>
        <size x="0" y="0" xunits="fraction" yunits="fraction"/>
      </ScreenOverlay>
    </Folder>
  </Document>
</kml>

我的代码是:

function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        var center=new GLatLng(39.9493, 116.3975);
        map.setCenter(center, 13);
        var geoXml = new GGeoXml("SamplesInMaps.kml");
            <!--Place KML on Map -->
            map.addOverlay(geoXml);
    }
}

但是,我没有成功,

你知道怎么做吗?

感谢

这是html文件:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <meta name="viewport" content="width=device-width,minimum-scale=0.3,maximum-scale=5.0,user-scalable=yes">

    </head>
<body onload="initialize()" onunload="GUnload()">

<style type="text/css">
*{
    margin:0;
    padding:0;
    }
.b{
    background:url(img/xr.png) right no-repeat;
    }
.b > div{
    width:30px;
    height:31px;
    background:url(img/xpinIcon.png) 0 0 no-repeat;
    }
</style>
<!--<div style="width:100px;height:100px;background:blue;"> </div>-->
<div id="map_canvas" style="width: 500px; height: 300px;"></div>


<div class=b style="position:absolute;left:700px;top:200px;">
    <div></div>
</div>
<div class=b style="position:absolute;left:700px;top:200px;">
    <div></div>
</div>

<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&sensor=false"type="text/javascript"></script>

<script type="text/javascript">
var aFn;
//**********
function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        var geoXml = new GGeoXml("SamplesInMaps.kml");
            map.addOverlay(geoXml);
        var center=new GLatLng(-122.0822035425683,37.42228990140251);
        map.setCenter(center, 0);


aFn=function(x,y){

            var point =new GPoint(x,y)
            point = map.fromContainerPixelToLatLng(point);
            //console.log(point.x+"   "+point.y)
            map.addOverlay(new GMarker(point));


/**********

        var marker = new GMarker(point, {draggable: true});

        GEvent.addListener(marker, "dragstart", function() {
        map.closeInfoWindow();
        });

        GEvent.addListener(marker, "dragend", function() {
        marker.openInfoWindowHtml("正在反弹...");
        });
        map.addOverlay(marker);
        */
    }
$(".b").draggable({
    revert: true,
    revertDuration: 0
    });
$("#map_canvas").droppable({
drop: function(event,ui) {
    //console.log(ui.offset.left+'   '+ui.offset.top)
    aFn(event.pageX-$("#map_canvas").offset().left,event.pageY-$("#map_canvas").offset().top);
    }
});
}
}
//*************



</script>
</body>
</html>

更新

我制作一个简单的kml文件“b.kml”:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Placemark>
    <name>Simple placemark</name>
    <description>Attached to the ground. Intelligently places itself 
       at the height of the underlying terrain.</description>
    <Point>
      <coordinates>-122.0822035425683,37.42228990140251,0</coordinates>
    </Point>
  </Placemark>
</kml>

,地图代码为:

var map = new GMap2(document.getElementById("map_canvas"));
var g = new GGeoXml("b.kml");
            map.addOverlay(g);
            var center=new GLatLng(37.42228990140251,-122.0822035425683);
map.setCenter(center, 0);

但是,它没有显示任何内容(地图没问题)..

为什么?

感谢

1 个答案:

答案 0 :(得分:0)

您的Google Maps API代码是正确的。 Unforuntatly Google Maps仅支持一组有限的KML,因此并非所有功能都受支持,Google地球更灵活,因此可能支持 Google地图无法理解的KML。

您可以尝试以下操作来检查您的Maps API代码是否正确:

var g = new GGeoXml("http://tagzania.com/rss/user/blogwatcher/7wonders%2Bnew/");
map.addOverlay(g);

此外,请注意,HTML文件中的setCenter()似乎使用反转的纬度和经度。应该是:

var center = new GLatLng(37.42228990140251, -122.0822035425683);