Google Maps Api cz.3

W trzeciej części omówię pobieranie danych na temat markerów z pliku XML. Użytecznym sposobem jest trzymanie danych o markerach w pliku XML, szczególnie jeśli mamy dużą ich liczbę. Przygotujmy prosty plik XML zawierający dane o kilku markerach markery.xml.

<markery>
	<marker lat="51.7592485" lng="19.4559833"  label="Marker One">
		<opis><![CDATA[
			Jakiś opis, w którym <b>można</b> używać html 
		]]></opis>
	</marker>
	<marker lat="51.7592485" lng="18.4551233" label="Marker Two">
		<opis><![CDATA[
			       Drugi marker 
		]]></opis>
	</marker>
	<marker lat="50.9592485" lng="20.4559833" label="Marker Three">
		<opis><![CDATA[
			       Trzeci marker 
		]]></opis>
	</marker>
</markery>

Plik XML odczytujemy za pomocą funkcji GDownloadUrl(). Jako pierwszy atrybut podajemy ścieżkę do pliku XML. Jeśli pobieranie się zakończy zostanie wywołana funkcja będąca drugim parametrem. Funkcja ta przyjmuje parametr dane, czyli dane z pliku i przetwarza go. Przetwarzanie rozpoczynamy od sparsowania dokumentu XML funkcją parse() obiektu GXml. Następnie zapisujemy w zmiennej markers tablicę elementów marker z naszego pliku. Pętla for przechodzi przez wszystkie elementy tej tablicy. W przypadku współrzędnych wartość atrybutu odczytujemy metodą getAttribute. Poza tym wartość ta musi być przekształcona do typu float (normalnie jest ciągiem znaków) aby można ją było przekazać do konstruktora obiektu GLatLng. W zmiennej html zapisujemy zawartość taga opis.

GDownloadUrl("markery.xml", function(dane) {
	  var xmlDoc = GXml.parse(dane);
	  var markers = xmlDoc.getElementsByTagName("marker");
  
	  for (var i = 0; i < markers.length; i++) {
	  // przetwarzamy atrybuty znaczników marker
	  var lat = parseFloat(markers[i].getAttribute("lat"));
	  var lng = parseFloat(markers[i].getAttribute("lng"));
	  var point = new GLatLng(lat,lng);
	  var html = GXml.value(markers[i].getElementsByTagName("opis")[0]);
	  // tworzymy marker
	  createMarker(point,html);
	  }
});

Rozbudujmy teraz plik XML dodając do każdego elementu marker dodatkowy atrybut drag. Markery, które chcemy uczynić przeciągalne oznaczać będziemy wartością atrybutu 1. Pozostałe markery wartością 0. Dodamy teraz dodatkową zmienną w powyższym kodzie.

var drag = parseInt(markers[i].getAttribute("drag"));

Odczytujemy atrybut drag. Jego wartość przekształcamy do liczby całkowitej funkcją parseInt(). Teraz w zależności od wartości atrybutu drag będziemy wstawiać markery funkcją createMarker() lub createDragMarker().

if(drag==1)
{
	createMarkerDrag(point,html);
}
else
{
	createMarker(point,html);
}

Kod całego pliku:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Pierwsza mapa</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=KEY" type="text/javascript"></script>
	    <script type="text/javascript">
    //<![CDATA[
	function init()
{
    if (GBrowserIsCompatible()) { 
	var map = new GMap2(document.getElementById("mapa"));
      	map.addControl(new GLargeMapControl());
      	map.addControl(new GMapTypeControl());
      	map.setCenter(new GLatLng(51.7592485,19.4559833),7);

      function createMarker(punkt,tresc) {
        var marker = new GMarker(punkt);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(tresc);
        });
	map.addOverlay(marker);
      }
	   // deklaracja nowej ikony  
    var ikonka = new GIcon();  
    ikonka.image = "custom_marker.png"; 
    ikonka.iconAnchor = new GPoint(16, 32);
    ikonka.shadow = "";
    ikonka.infoWindowAnchor = new GPoint(16,16); 
    ikonka.iconSize = new GSize(32, 32);

	  function createMarkerDrag(punkt,tresc) {
        var marker = new GMarker(punkt,{title: 'Najechałeś na mnie myszką', draggable: true, icon: ikonka});
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(tresc);
        });
	map.addOverlay(marker);
      }
     // czytamy dane z pliku markery.xml
      GDownloadUrl("markery.xml", function(dane) {
		var xmlDoc = GXml.parse(dane);
		var markers = xmlDoc.getElementsByTagName("marker");
	
		for (var i = 0; i < markers.length; i++) {
		// przetwarzamy atrybuty znaczników marker
		var lat = parseFloat(markers[i].getAttribute("lat"));
		var lng = parseFloat(markers[i].getAttribute("lng"));
		var point = new GLatLng(lat,lng);
		var html = GXml.value(markers[i].getElementsByTagName("opis")[0]);
		var drag = parseInt(markers[i].getAttribute("drag"));
		// tworzymy marker
			if(drag==1)
			{
				createMarkerDrag(point,html);
			}
			else
			{
				createMarker(point,html);
			}
		}
      });
    }
}
    //]]>
    </script>
  </head>
  <body onload="init()" onunload="GUnload()">
    <div id="mapa" style="width: 500px; height: 400px"></div> 
  </body>
</html>

W następnej części przedstawię zdarzenia oraz geokodowanie.