Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Wyświetlanie informacji na mapie
Forum PHP.pl > Forum > Przedszkole
sunshine
8.07.2010, 18:12:58
Witam, mam problem z wyświetlaniem tzw. "dymków" na mapie. Wczytuję wszystkie markery z bazy i chciałam dodać też informacje nad markerami (po kliknięciu). Napisałam taki kod:
[JAVASCRIPT] pobierz, plaintext 
  1. for (var i = 0; i < znaczniki.length; i++) {
  2.  
  3.             			var nazwa = znaczniki[i].getAttribute("nazwa");
  4.             			var adres = znaczniki[i].getAttribute("adres");
  5.             			var typ = znaczniki[i].getAttribute("typ");
  6.             			var wspolrzedne = new GLatLng(
  7.             				parseFloat(znaczniki[i].getAttribute("lat")),
  8.             				parseFloat(znaczniki[i].getAttribute("lng")));
  9.             			//Buduje strukturę wyświetlanego elementu
  10.             			var html = "<b>" + nazwa + " ," + adres + "<br/><img src=miniatury/" + miniaturka + ".jpg>";
  11.             			var ikona = ikonki[typ];
  12.  
  13.             			//var lat = parseFloat(znaczniki[i].getAttribute("lat"));
  14.                                 //var lng = parseFloat(znaczniki[i].getAttribute("lng"));
  15.             			//var point = new GLatLng(lat, lng);
  16.             			var marker = new GMarker(wspolrzedne, {
  17.             				icon: ikona,
  18.             				shadow: ikona.shadow
  19.             			});
  20.  
  21.             			GEvent.addListener(marker, "click", function() {  
  22.             			marker.openInfoWindowHtml(html);});  
  23.  
  24.  
  25.             			mapa.addOverlay(marker);
  26.             		}
[JAVASCRIPT] pobierz, plaintext

Ale tworzy tylko jeden dymek na ostatnim wczytaniu z pętli. Firebug nie zwraca błędów.
outsider
8.07.2010, 18:40:38
ja to robie tak:

Kod
    
var info ='tutaj info';    
var point = new GLatLng(50.1111, 18.2222);  
var marker = new GMarker(point);  
GEvent.addListener(marker, "click", function() {  
marker.openInfoWindowHtml(info);});
sunshine
8.07.2010, 19:07:59
*OuTSideR*, ja tak samo chyba robię.
[JAVASCRIPT] pobierz, plaintext 
  1. var ikona = ikonki[typ];
  2.             			var html = "<b>" + nazwa + " ," + adres + "<br/><img src=miniatury/" + miniaturka + ".jpg>";
  3. 				var lat = parseFloat(znaczniki[i].getAttribute("lat"));
  4.                                 var lng = parseFloat(znaczniki[i].getAttribute("lng"));
  5.             			var point = new GLatLng(lat, lng);
  6.             			var marker = new GMarker(point, {icon: ikona, shadow: ikona.shadow});
  7.             			GEvent.addListener(marker, "click", function() {  
  8.             			marker.openInfoWindowHtml(html);});  
[JAVASCRIPT] pobierz, plaintext

Zamiast info mam html i mam dodaną ikonkę, bo markery mają różne typy ikonek. Taki mam z tego efekt, że tworzy się tylko jeden marker z informacją i otwiera się ona gdy kliknę na jakikolwiek marker. Dymek tworzy się dla ostatniego tylko wpisu w bazie.
outsider
8.07.2010, 19:19:19
ale mi to dziala, Ty masz jeszcze jakies inne dodatki w tym smile.gif sprobuj z moja wersja
sunshine
8.07.2010, 19:47:44 
[JAVASCRIPT] pobierz, plaintext 
  1.                                                 var info ='tutaj info';    
  2. 						var point = new GLatLng(lat, lng);  
  3. 						var marker = new GMarker(point);  
  4. 						GEvent.addListener(marker, "click", function() {  
  5. 						marker.openInfoWindowHtml(info);});
  6.             			                mapa.addOverlay(marker);
[JAVASCRIPT] pobierz, plaintext


teraz mam tak samo sad.gif Tworzą się teraz takie same markery podstawowe ale dymek dalej tylko dla jednego (tego samego) markera. Ja zmienne lat i lng nie mogę wczytać "z palca". Muszę poprzez:
[JAVASCRIPT] pobierz, plaintext 
  1.                         var lat = parseFloat(znaczniki[i].getAttribute("lat"));
  2.                         var lng = parseFloat(znaczniki[i].getAttribute("lng"));
[JAVASCRIPT] pobierz, plaintext


Całość javascript
[JAVASCRIPT] pobierz, plaintext 
  1. <script type="text/javascript">
  2. var mapa;
  3. var punkt;
  4.  
  5. var woda_ikona =  new GIcon();
  6. woda_ikona.image = 'http://maps.google.com/mapfiles/kml/pal3/icon50.png';
  7. woda_ikona.shadow = 'http://maps.google.com/mapfiles/kml/pal3/icon50s.png';
  8. woda_ikona.iconSize = new GSize(32, 32);  
  9. woda_ikona.infoWindowAnchor = new GPoint(16,16);  
  10. woda_ikona.iconAnchor = new GPoint(16,16);  
  11. woda_ikona.shadowSize = new GSize(59, 32);
  12.  
  13. var las_ikona =  new GIcon();
  14. las_ikona.image = 'http://maps.google.com/mapfiles/kml/pal2/icon4.png';
  15. las_ikona.shadow = 'http://maps.google.com/mapfiles/kml/pal2/icon4s.png';
  16. las_ikona.iconSize = new GSize(32, 32);  
  17. las_ikona.infoWindowAnchor = new GPoint(16,16);  
  18. las_ikona.iconAnchor = new GPoint(16,16);  
  19. las_ikona.shadowSize = new GSize(59, 32);
  20.  
  21. var gory_ikona =  new GIcon();
  22. gory_ikona.image = 'http://maps.google.com/mapfiles/kml/pal3/icon29.png';
  23. gory_ikona.shadow = 'http://maps.google.com/mapfiles/kml/pal3/icon29s.png';
  24. gory_ikona.iconSize = new GSize(32, 32);  
  25. gory_ikona.infoWindowAnchor = new GPoint(16,16);  
  26. gory_ikona.iconAnchor = new GPoint(16,16);  
  27. gory_ikona.shadowSize = new GSize(59, 32);
  28.  
  29. var zabytki_ikona =  new GIcon();
  30. zabytki_ikona.image = 'http://maps.google.com/mapfiles/kml/pal2/icon2.png';
  31. zabytki_ikona.shadow = 'http://maps.google.com/mapfiles/kml/pal2/icon2s.png';
  32. zabytki_ikona.iconSize = new GSize(32, 32);  
  33. zabytki_ikona.infoWindowAnchor = new GPoint(16,16);  
  34. zabytki_ikona.iconAnchor = new GPoint(16,16);  
  35. zabytki_ikona.shadowSize = new GSize(59, 32);
  36.  
  37. var restauracje_ikona =  new GIcon();
  38. restauracje_ikona.image = 'http://maps.google.com/mapfiles/kml/pal2/icon32.png';
  39. restauracje_ikona.shadow = 'http://maps.google.com/mapfiles/kml/pal2/icon32s.png';
  40. restauracje_ikona.iconSize = new GSize(32, 32);  
  41. restauracje_ikona.infoWindowAnchor = new GPoint(16,16);  
  42. restauracje_ikona.iconAnchor = new GPoint(16,16);  
  43. restauracje_ikona.shadowSize = new GSize(59, 32);
  44.  
  45. var ikonki = {
  46. 		woda:  woda_ikona,
  47. 		las:  las_ikona,
  48. 		gory:  gory_ikona,
  49. 		zabytki:  zabytki_ikona,
  50. 		restauracje:  restauracje_ikona
  51. };
  52.  
  53. //Ładuje znaczniki na mapę
  54. function mapaStart() {
  55.  
  56. 	//mapa = new GMap2(document.getElementById("mapka"));
  57. 	if (GBrowserIsCompatible()) {
  58.                 mapa = new GMap2(document.getElementById("mapa"));
  59.                 punkt = new GLatLng(a,b);
  60.                 mapa.setCenter(punkt,14);
  61.                 mapa.setUIToDefault();
  62.  
  63.             				// nowy obiekt do geokodowania
  64.             			    geo = new GClientGeocoder();
  65.  
  66.             	//var dymekInfo = new GInfoWindow();
  67.             	//Pobiera nazwę pliku generującego XML
  68.             	$.get("modules/generatorXML.php", function(data) {
  69.             		var xml = parseXml(data);
  70.             		//Zczytuje dane z pliku XML
  71.             		var znaczniki = xml.documentElement.getElementsByTagName("znacznik");
  72.             		//alert(znaczniki);
  73.             		for (var i = 0; i < znaczniki.length; i++) {
  74.  
  75.             			var nazwa = znaczniki[i].getAttribute("nazwa");
  76.             			var adres = znaczniki[i].getAttribute("adres");
  77.             			var typ = znaczniki[i].getAttribute("typ");
  78.             			var wspolrzedne = new GLatLng(
  79.             				parseFloat(znaczniki[i].getAttribute("lat")),
  80.             				parseFloat(znaczniki[i].getAttribute("lng")));
  81.             			//Buduje strukturę wyświetlanego elementu
  82.  
  83.             			var ikona = ikonki[typ];
  84.             			var html = "<b>" + nazwa + " ," + adres + "<br/><img src=miniatury/" + miniaturka + ".jpg>";
  85. 				var lat = parseFloat(znaczniki[i].getAttribute("lat"));
  86.                                 var lng = parseFloat(znaczniki[i].getAttribute("lng"));
  87.             			var point = new GLatLng(lat, lng);
  88.             			var marker = new GMarker(point, {icon: ikona, shadow: ikona.shadow});
  89.             			GEvent.addListener(marker, "click", function() {  
  90.             			marker.openInfoWindowHtml(html);});  
  91.  
  92.             			mapa.addOverlay(marker);
  93.             		}
  94.             	});
  95.             }
  96. }
  97. //Funkcja parsująca XML
  98. function parseXml(str) {
  99. 	if (window.ActiveXObject) {
  100. 		var doc = new ActiveXObject('Microsoft.XMLDOM');
  101. 		doc.loadXML(str);
  102. 		return doc;
  103. 	}
  104. 	else if (window.DOMParser) {
  105. 		return (new DOMParser).parseFromString(str, 'text/xml');
  106. 	}
  107. }
  108.  
  109. function nicNieRob()
  110. {
  111. return false;
  112. }
  113.  
  114. function obliczOdleglosc()
  115. {
  116.     var adres = document.getElementById("adres").value;     
  117.     var trasa = new GDirections(mapa);
  118.     GEvent.addListener(trasa, "load", function () {
  119.  
  120.  
  121.         var dystans = trasa.getDistance().meters/1000;
  122.         var wynik = document.getElementById("wynik");
  123.         wynik.innerHTML = "Odległość: " + Math.round(dystans) + "km";
  124.     });  
  125.     	trasa.load("from: "+punkt+" to: "+adres);
  126. }
[JAVASCRIPT] pobierz, plaintext
outsider
9.07.2010, 12:44:24
klikajac na inne markery, nie masz dymka i infa danego markera ?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.