Google Maps Api cz.4 

{
11.09.2011
}
WebdevJavascript
W tej części przybliżę zdarzenia oraz geokodowanie. Kod z poprzednich części będzie rozbudowywany. Zdarzenia w Google Maps API otwierają przed nami wiele ciekawych możliwości. Nie sposób opisać tutaj wszystkich dostępnych zdarzeń dla różnych obiektów. Przedstawię zdarzenia na przykładzie prostej aplikacji. Rejestruje ona współrzędne położenia markera w momencie zakończenia jego przeciągania i wyświetla te współrzędne w odpowiednich znacznikach div. Zdarzenia obsługuje się za pomocą metody addListener() obiektu GEvent. Dodajmy na końcu funkcji createMarkerDrag() dodatkowy kod obsługujący zdarzenie. Teraz funkcja wygląda następująco:
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);
        });
	
	GEvent.addListener(marker, "dragend", function() {
    var coord = marker.getPoint();
    var x = coord.x;
    var y = coord.y;
    document.getElementById("coord_x").firstChild.nodeValue = x;
    document.getElementById("coord_y").firstChild.nodeValue = y;
  });
    map.addOverlay(marker);
}
  1. function createMarkerDrag(punkt,tresc) {
  2.         var marker = new GMarker(punkt,{title: 'Najechałeś na mnie myszką', draggable: true, icon: ikonka});
  3.         GEvent.addListener(marker, "click", function() {
  4.           marker.openInfoWindowHtml(tresc);
  5.         });
  6.        
  7.         GEvent.addListener(marker, "dragend", function() {
  8.     var coord = marker.getPoint();
  9.     var x = coord.x;
  10.     var y = coord.y;
  11.     document.getElementById("coord_x").firstChild.nodeValue = x;
  12.     document.getElementById("coord_y").firstChild.nodeValue = y;
  13.   });
  14.     map.addOverlay(marker);
  15. }
Wewnątrz body umieśćmy dwa znaczniki div. W nich wyświetlać się będą współrzędne punktu wyznaczonego przez marker. Funkcja addListener() przyjmuje trzy parametry: obiekt, do którego przypisujemy zdarzenie, ciąg znaków określający rodzaj zdarzenia (np. dragend, click, dblclick) oraz funkcję, która ma być wywołana w momencie zajścia zdarzenia. Pełny spis zdarzeń dostępnych dla poszczególnych obiektów można znaleźć w dokumentacji. My wykorzystamy zdarzenia dragend. Oznacza ono zakończenie przeciągania markera. Funkcja obsługująca zdarzenie najpierw pobiera punkt z markera (marker.getPoint()), a następnie rozkłada go na współrzędne x i y. Ostatnią czynnością jest wstawienie współrzędnych do wcześniej przygotowanych divów. Dodajmy jeszcze dla naszego markera efekt mouseover i mouseout. Do funkcji wystarczy dopisać:
GEvent.addListener(marker, "mouseover", function() {
    marker.setImage("custom_marker2.png");
});
GEvent.addListener(marker, "mouseout", function() {
    marker.setImage("custom_marker.png");
});
  1. GEvent.addListener(marker, "mouseover", function() {
  2.     marker.setImage("custom_marker2.png");
  3. });
  4. GEvent.addListener(marker, "mouseout", function() {
  5.     marker.setImage("custom_marker.png");
  6. });
Pierwsze zdarzenie podmieni obrazek markera na plik custom_marker2.png po najechaniu na niego myszką, drugie przywróci poprzedni obrazek po zjechaniu z markera. Pełny kod 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);
        });
	//do zdarzen
	GEvent.addListener(marker, "dragend", function() {
	var coord = marker.getPoint();
	var x = coord.x;
	var y = coord.y;
	document.getElementById("coord_x").firstChild.nodeValue = x;
	document.getElementById("coord_y").firstChild.nodeValue = y;
	});
	GEvent.addListener(marker, "mouseover", function() {
          marker.setImage("custom_marker2.png");
        });
	GEvent.addListener(marker, "mouseout", function() {
          marker.setImage("custom_marker.png");
        });
	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> 
<div id="coord_x"> </div><div id="coord_y"> </div>
  </body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.   <head>
  3.     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  4.     <title>Pierwsza mapa</title>
  5.     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=KEY" type="text/javascript"></script>
  6.             <script type="text/javascript">
  7.     //<![CDATA[
  8.         function init()
  9. {
  10.    if (GBrowserIsCompatible()) {
  11.         var map = new GMap2(document.getElementById("mapa"));
  12.         map.addControl(new GLargeMapControl());
  13.         map.addControl(new GMapTypeControl());
  14.         map.setCenter(new GLatLng(51.7592485,19.4559833),7);
  15.  
  16.      function createMarker(punkt,tresc) {
  17.        var marker = new GMarker(punkt);
  18.        GEvent.addListener(marker, "click", function() {
  19.          marker.openInfoWindowHtml(tresc);
  20.        });
  21.         map.addOverlay(marker);
  22.      }
  23.            // deklaracja nowej ikony  
  24.    var ikonka = new GIcon();  
  25.    ikonka.image = "custom_marker.png";
  26.    ikonka.iconAnchor = new GPoint(16, 32);
  27.    ikonka.shadow = "";
  28.    ikonka.infoWindowAnchor = new GPoint(16,16);
  29.    ikonka.iconSize = new GSize(32, 32);
  30.  
  31.           function createMarkerDrag(punkt,tresc) {
  32.        var marker = new GMarker(punkt,{title: 'Najechałeś na mnie myszką', draggable: true, icon: ikonka});
  33.        GEvent.addListener(marker, "click", function() {
  34.          marker.openInfoWindowHtml(tresc);
  35.        });
  36.         //do zdarzen
  37.         GEvent.addListener(marker, "dragend", function() {
  38.         var coord = marker.getPoint();
  39.         var x = coord.x;
  40.         var y = coord.y;
  41.         document.getElementById("coord_x").firstChild.nodeValue = x;
  42.         document.getElementById("coord_y").firstChild.nodeValue = y;
  43.         });
  44.         GEvent.addListener(marker, "mouseover", function() {
  45.          marker.setImage("custom_marker2.png");
  46.        });
  47.         GEvent.addListener(marker, "mouseout", function() {
  48.          marker.setImage("custom_marker.png");
  49.        });
  50.         map.addOverlay(marker);
  51.      }
  52.     // czytamy dane z pliku markery.xml
  53.      GDownloadUrl("markery.xml", function(dane) {
  54.                 var xmlDoc = GXml.parse(dane);
  55.                 var markers = xmlDoc.getElementsByTagName("marker");
  56.        
  57.                 for (var i = 0; i < markers.length; i++) {
  58.                 // przetwarzamy atrybuty znaczników marker
  59.                 var lat = parseFloat(markers[i].getAttribute("lat"));
  60.                 var lng = parseFloat(markers[i].getAttribute("lng"));
  61.                 var point = new GLatLng(lat,lng);
  62.                 var html = GXml.value(markers[i].getElementsByTagName("opis")[0]);
  63.                 var drag = parseInt(markers[i].getAttribute("drag"));
  64.                 // tworzymy marker
  65.                         if(drag==1)
  66.                         {
  67.                                 createMarkerDrag(point,html);
  68.                         }
  69.                         else
  70.                         {
  71.                                 createMarker(point,html);
  72.                         }
  73.                 }
  74.      });
  75.    }
  76. }
  77.    //]]>
  78.     </script>
  79.   </head>
  80.   <body onload="init()" onunload="GUnload()">
  81.     <div id="mapa" style="width: 500px; height: 400px"></div>
  82. <div id="coord_x"> </div><div id="coord_y"> </div>
  83.   </body>
  84. </html>

Geokodowanie

Geokodowanie polega na przekształceniu adresu np. Łódź, Piotrkowska 95 na punkt na mapie. W Polsce geokodowanie z dokładnością do numeru budynku można stosować tylko dla większych miast. Należy stworzyć obiekt klasy GClientGeocoder(). Posiada on metodę getLatLng(), która przekształca adres na współrzędne. Metodzie tej musimy przekazać dwa parametry: adres oraz funkcję, która będzie wykonana po zgeokodowaniu adresu. My będziemy odczytywać adresy z pliku XML. Zamiast atrybutów lat i lng, dodaliśmy atrybut adres.
<markery>
	<marker adres="Łódź, Piotrkowska 95"  label="Marker One" drag="0">
		<opis><![CDATA[
			Jakiś opis, w którym <b>można</b> używać html 
		]]></opis>
	</marker>
	<marker adres="Warszawa, Samolotowa 1" label="Marker Two" drag="0">
		<opis><![CDATA[
			       Drugi marker 
		]]></opis>
	</marker>
	<marker adres="Łódź, Sokola 3" label="Marker Three" drag="0">
		<opis><![CDATA[
			       Trzeci marker 
		]]></opis>
	</marker>
</markery>
  1. <markery>
  2.         <marker adres="Łódź, Piotrkowska 95"  label="Marker One" drag="0">
  3.                 <opis><![CDATA[
  4.                         Jakiś opis, w którym <b>można</b> używać html
  5.                 ]]></opis>
  6.         </marker>
  7.         <marker adres="Warszawa, Samolotowa 1" label="Marker Two" drag="0">
  8.                 <opis><![CDATA[
  9.                                Drugi marker
  10.                 ]]></opis>
  11.         </marker>
  12.         <marker adres="Łódź, Sokola 3" label="Marker Three" drag="0">
  13.                 <opis><![CDATA[
  14.                                Trzeci marker
  15.                 ]]></opis>
  16.         </marker>
  17. </markery>
Najpierw stworzymy obiekt GClientGeocoder().
var geocoder = new GClientGeocoder();
  1. var geocoder = new GClientGeocoder();
Następnym krokiem jest opracowanie działania funkcji przetwarzającej otrzymany adres. Funkcja ta jest drugim parametrem dla metody getLatLng().
geocoder.getLatLng(adres,function(point)
{
	if (!point)
	{
		alert(adres + " nie został znaleziony."); 
	}
	else
	{
		if(drag==1)
		{
			createMarkerDrag(point,html);
		}
		else
		{
			createMarker(point,html);
		}
	}
});
  1. geocoder.getLatLng(adres,function(point)
  2. {
  3.         if (!point)
  4.         {
  5.                 alert(adres + " nie został znaleziony.");
  6.         }
  7.         else
  8.         {
  9.                 if(drag==1)
  10.                 {
  11.                         createMarkerDrag(point,html);
  12.                 }
  13.                 else
  14.                 {
  15.                         createMarker(point,html);
  16.                 }
  17.         }
  18. });
Adres miejsca z pliku XML złapiemy w następujący sposób:
var adres = markers[i].getAttribute("adres");
  1. var adres = markers[i].getAttribute("adres");
Funkcja przetwarzająca adres wstawia marker lub wyświetla komunikat, jeśli adres nie został znaleziony.
Pełny kod 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"));
	var geocoder = new GClientGeocoder();
      	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);
        });
	GEvent.addListener(marker, "dragend", function() {
	var coord = marker.getPoint();
	var x = coord.x;
	var y = coord.y;
	document.getElementById("coord_x").firstChild.nodeValue = x;
	document.getElementById("coord_y").firstChild.nodeValue = y;
	});
	GEvent.addListener(marker, "mouseover", function() {
          marker.setImage("custom_marker2.png");
        });
	GEvent.addListener(marker, "mouseout", function() {
          marker.setImage("custom_marker.png");
        });
	map.addOverlay(marker);
      }
	function geoc(adres,html)//html to opis w dymku
	{
		geocoder.getLatLng(adres,
			function(point)
			{
				if (!point) {
					alert(adres + " not found");
				}
				else 
				{
					createMarker(point,html);
				}
			}
		);
	}
	
     	// czytamy dane z pliku markery.xml
      	GDownloadUrl("markery2.xml", function(dane) {
		var xmlDoc = GXml.parse(dane);
		var markers = xmlDoc.getElementsByTagName("marker");
	
		for (var i = 0; i < markers.length; i++) {
		var adres = markers[i].getAttribute("adres");
		var html = GXml.value(markers[i].getElementsByTagName("opis")[0]);
		var drag = parseInt(markers[i].getAttribute("drag"));
		geoc(adres,html);
		}
      });
    }
}
    //]]>
    </script>
  </head>
  <body onload="init()" onunload="GUnload()">
    <div id="mapa" style="width: 500px; height: 400px"></div> 
<div id="coord_x"> </div><div id="coord_y"> </div>
  </body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.   <head>
  3.     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  4.     <title>Pierwsza mapa</title>
  5.     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=KEY" type="text/javascript"></script>
  6.             <script type="text/javascript">
  7.     //<![CDATA[
  8.         function init()
  9. {
  10.    if (GBrowserIsCompatible()) {
  11.         var map = new GMap2(document.getElementById("mapa"));
  12.         var geocoder = new GClientGeocoder();
  13.         map.addControl(new GLargeMapControl());
  14.         map.addControl(new GMapTypeControl());
  15.         map.setCenter(new GLatLng(51.7592485,19.4559833),7);
  16.  
  17.      function createMarker(punkt,tresc) {
  18.        var marker = new GMarker(punkt);
  19.        GEvent.addListener(marker, "click", function() {
  20.          marker.openInfoWindowHtml(tresc);
  21.        });
  22.         map.addOverlay(marker);
  23.      }
  24.            // deklaracja nowej ikony  
  25.    var ikonka = new GIcon();  
  26.    ikonka.image = "custom_marker.png";
  27.    ikonka.iconAnchor = new GPoint(16, 32);
  28.    ikonka.shadow = "";
  29.    ikonka.infoWindowAnchor = new GPoint(16,16);
  30.    ikonka.iconSize = new GSize(32, 32);
  31.  
  32.           function createMarkerDrag(punkt,tresc) {
  33.        var marker = new GMarker(punkt,{title: 'Najechałeś na mnie myszką', draggable: true, icon: ikonka});
  34.        GEvent.addListener(marker, "click", function() {
  35.          marker.openInfoWindowHtml(tresc);
  36.        });
  37.         GEvent.addListener(marker, "dragend", function() {
  38.         var coord = marker.getPoint();
  39.         var x = coord.x;
  40.         var y = coord.y;
  41.         document.getElementById("coord_x").firstChild.nodeValue = x;
  42.         document.getElementById("coord_y").firstChild.nodeValue = y;
  43.         });
  44.         GEvent.addListener(marker, "mouseover", function() {
  45.          marker.setImage("custom_marker2.png");
  46.        });
  47.         GEvent.addListener(marker, "mouseout", function() {
  48.          marker.setImage("custom_marker.png");
  49.        });
  50.         map.addOverlay(marker);
  51.      }
  52.         function geoc(adres,html)//html to opis w dymku
  53.         {
  54.                 geocoder.getLatLng(adres,
  55.                         function(point)
  56.                         {
  57.                                 if (!point) {
  58.                                         alert(adres + " not found");
  59.                                 }
  60.                                 else
  61.                                 {
  62.                                         createMarker(point,html);
  63.                                 }
  64.                         }
  65.                 );
  66.         }
  67.        
  68.         // czytamy dane z pliku markery.xml
  69.         GDownloadUrl("markery2.xml", function(dane) {
  70.                 var xmlDoc = GXml.parse(dane);
  71.                 var markers = xmlDoc.getElementsByTagName("marker");
  72.        
  73.                 for (var i = 0; i < markers.length; i++) {
  74.                 var adres = markers[i].getAttribute("adres");
  75.                 var html = GXml.value(markers[i].getElementsByTagName("opis")[0]);
  76.                 var drag = parseInt(markers[i].getAttribute("drag"));
  77.                 geoc(adres,html);
  78.                 }
  79.      });
  80.    }
  81. }
  82.    //]]>
  83.     </script>
  84.   </head>
  85.   <body onload="init()" onunload="GUnload()">
  86.     <div id="mapa" style="width: 500px; height: 400px"></div>
  87. <div id="coord_x"> </div><div id="coord_y"> </div>
  88.   </body>
  89. </html>
Dodaj do:
Brak komentarzy

Dodaj komentarz