comment utiliser le fichier kml dans mon code
https://stackoverflow.com/questions/2482644
-
21-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
télécharger un fichier 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>
et mon code est:
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);
}
}
mais, je ne sais pas avec succès ,,
savez-vous comment faire ..
Merci
est le fichier 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&v=2&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>
mise à jour
je fais un simple fichier 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>
et le code de la carte est:
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);
mais, il ne rien montrer (la carte est ok) ..
pourquoi?
Merci
La solution
Votre code API Google Maps est correcte. Unforuntatly Google Maps prend en charge qu'un nombre limité de KML afin de ne pas toutes les fonctionnalités sont prises en charge et Google Earth est plus souple de sorte qu'il pourrait soutenir KML que Google Maps ne comprendront pas.
Vous pouvez essayer ce qui suit pour vérifier que votre code API Maps est correcte:
var g = new GGeoXml("http://tagzania.com/rss/user/blogwatcher/7wonders%2Bnew/");
map.addOverlay(g);
En outre, notez que le setCenter() dans votre fichier HTML semble utiliser une latitude et la longitude inversée. Il devrait probablement être:
var center = new GLatLng(37.42228990140251, -122.0822035425683);
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
