parsear un fichero Kml (google maps) a javascript
Publicado por David (1 intervención) el 13/09/2010 19:51:17
Hola a todos,
Vereis tengo un problema, estoy tratando de parsear un fichero KML (generado por aplicacion de google maps) pero no consigo capturar las coordenadas de este para mostrarlas en un fichero Html. Os dejo el codigo implementado hasta ahora:
Fichero Kml:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
<ScribbleMaps v="3.0" id="kWIcnxWi9N" lat="43.2569629" yaw="0" pitch="0" lng="-2.9234409" zoom="17" type="Mapa" ></ScribbleMaps><name><![CDATA[]]></name><description><![CDATA[]]></description><atom:author><atom:name>Scribble Maps</atom:name></atom:author><atom:link href="http://www.scribblemaps.com/maps/view/kWIcnxWi9N"/>
<Style id="style_0"><LineStyle><color>cccc9900</color><blendMode>normal</blendMode><width>2</width></LineStyle><PolyStyle><color>cccc9900</color><colorMode>normal</colorMode><blendMode>normal</blendMode><fill>1</fill></PolyStyle></Style>
<Style id="style_1"><LabelStyle><color>cccc9900</color><width>2</width></LabelStyle><IconStyle><scale>2</scale><color>ccffffff</color><Icon><href>http://www.scribblemaps.com//transparent.png</href></Icon></IconStyle></Style>
<Placemark scribbleType="4"><name><![CDATA[Polygon]]></name><styleUrl>#style_0</styleUrl>
<Polygon>
<altitudeMode>clampToGround</altitudeMode>
<outerBoundaryIs>
<LinearRing>
<coordinates>
-2.925983634146132,43.25691211106332,0
-2.925361361654677,43.25774816970697,0
-2.923516001852431,43.25787318683532,0
-2.9225718642791687,43.25774816970697,0
-2.9220246936401506,43.25750594829041,0
-2.922915187033095,43.255396237145355,0
-2.9252218867858826,43.25606041335211,0
-2.9260265494903503,43.25690429737698,0
-2.926005091818251,43.25691211106332,0
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark scribbleType="5" scenter="false" noborder="false"><name><![CDATA[02-Abando]]></name><description><![CDATA[<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Verdana" STYLE="font-size: 10px" size="10" COLOR="#0099CC" LETTERSPACING="0" KERNING="0"><B>Your text here.</B></FONT></P></TEXTFORMAT>]]>
</description><styleUrl>#style_1</styleUrl>
<Point>
<coordinates>
-2.9240953589996477,43.25699024787145,0
</coordinates>
</Point>
</Placemark>
</Document>
</kml>
Fichero Html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Asynchronous Data Retrieval</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
<style type="text/css">
html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% }
</style>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(43.2604, -2.9244), 13);
/*GDownloadUrl("./include/data.xml", function(data) {
var latLng1= new GLatLng(43.2563, -2.9255);
var latLng2= new GLatLng(43.2578, -2.9219);
map.addOverlay(new GMarker(latLng1));
map.addOverlay(new GMarker(latLng2));
});*/
GDownloadUrl("c:/kWIcnxWi9N.kml", function(data) {
var xml = GXml.parse(data);
var poligono = xml.documentElement.getElementsByTagName("Polygon");
alert("POLYGON");
//var limExt = parseFloat(poligono.getAttribute("outerBoundaryIs"));
//while(!poligono.getBounds().equals()){
//alert("WHILE");
debugger;
alert(poligono.childNodes);
alert(poligono.firstChild.nodeName);
alert(poligono.firstChild.nodeValue);
alert(poligono.getVertex(0).lat());
var lat = parseFloat(poligono.getVertex(0).lat());
alert("LATITUD");
var lng = parseFloat(poligono.getVertex(0).lng());
alert("LONGITUD");
var latlng = new GMarker(lat,lng);
alert("LATLNG");
map.addOverlay(new GMarker(latlng));
alert("ANADIDO");
//}
//alert("FUERA WHILE");
/*for (var i = 0; i < markers.length; i++) {
var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
map.addOverlay(new GMarker(latlng));
}*/
});
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Gracias por adelantado,
Un saludo.
Vereis tengo un problema, estoy tratando de parsear un fichero KML (generado por aplicacion de google maps) pero no consigo capturar las coordenadas de este para mostrarlas en un fichero Html. Os dejo el codigo implementado hasta ahora:
Fichero Kml:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
<ScribbleMaps v="3.0" id="kWIcnxWi9N" lat="43.2569629" yaw="0" pitch="0" lng="-2.9234409" zoom="17" type="Mapa" ></ScribbleMaps><name><![CDATA[]]></name><description><![CDATA[]]></description><atom:author><atom:name>Scribble Maps</atom:name></atom:author><atom:link href="http://www.scribblemaps.com/maps/view/kWIcnxWi9N"/>
<Style id="style_0"><LineStyle><color>cccc9900</color><blendMode>normal</blendMode><width>2</width></LineStyle><PolyStyle><color>cccc9900</color><colorMode>normal</colorMode><blendMode>normal</blendMode><fill>1</fill></PolyStyle></Style>
<Style id="style_1"><LabelStyle><color>cccc9900</color><width>2</width></LabelStyle><IconStyle><scale>2</scale><color>ccffffff</color><Icon><href>http://www.scribblemaps.com//transparent.png</href></Icon></IconStyle></Style>
<Placemark scribbleType="4"><name><![CDATA[Polygon]]></name><styleUrl>#style_0</styleUrl>
<Polygon>
<altitudeMode>clampToGround</altitudeMode>
<outerBoundaryIs>
<LinearRing>
<coordinates>
-2.925983634146132,43.25691211106332,0
-2.925361361654677,43.25774816970697,0
-2.923516001852431,43.25787318683532,0
-2.9225718642791687,43.25774816970697,0
-2.9220246936401506,43.25750594829041,0
-2.922915187033095,43.255396237145355,0
-2.9252218867858826,43.25606041335211,0
-2.9260265494903503,43.25690429737698,0
-2.926005091818251,43.25691211106332,0
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark scribbleType="5" scenter="false" noborder="false"><name><![CDATA[02-Abando]]></name><description><![CDATA[<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Verdana" STYLE="font-size: 10px" size="10" COLOR="#0099CC" LETTERSPACING="0" KERNING="0"><B>Your text here.</B></FONT></P></TEXTFORMAT>]]>
</description><styleUrl>#style_1</styleUrl>
<Point>
<coordinates>
-2.9240953589996477,43.25699024787145,0
</coordinates>
</Point>
</Placemark>
</Document>
</kml>
Fichero Html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Asynchronous Data Retrieval</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
<style type="text/css">
html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% }
</style>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(43.2604, -2.9244), 13);
/*GDownloadUrl("./include/data.xml", function(data) {
var latLng1= new GLatLng(43.2563, -2.9255);
var latLng2= new GLatLng(43.2578, -2.9219);
map.addOverlay(new GMarker(latLng1));
map.addOverlay(new GMarker(latLng2));
});*/
GDownloadUrl("c:/kWIcnxWi9N.kml", function(data) {
var xml = GXml.parse(data);
var poligono = xml.documentElement.getElementsByTagName("Polygon");
alert("POLYGON");
//var limExt = parseFloat(poligono.getAttribute("outerBoundaryIs"));
//while(!poligono.getBounds().equals()){
//alert("WHILE");
debugger;
alert(poligono.childNodes);
alert(poligono.firstChild.nodeName);
alert(poligono.firstChild.nodeValue);
alert(poligono.getVertex(0).lat());
var lat = parseFloat(poligono.getVertex(0).lat());
alert("LATITUD");
var lng = parseFloat(poligono.getVertex(0).lng());
alert("LONGITUD");
var latlng = new GMarker(lat,lng);
alert("LATLNG");
map.addOverlay(new GMarker(latlng));
alert("ANADIDO");
//}
//alert("FUERA WHILE");
/*for (var i = 0; i < markers.length; i++) {
var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
map.addOverlay(new GMarker(latlng));
}*/
});
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Gracias por adelantado,
Un saludo.
Valora esta pregunta
0