Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wyświetlanie informacji o punkcie z mapy
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
mireczek113
12.10.2012, 19:43:02
Witam. mam taki problem: Mam kod który po wpisaniu miejscowości wyświetla go i zaznacza na mapie tzw marker.(Wszystko jest oparte na GOOGLE MAPS) I mój problem polega na tym, że chcę teraz do tego dołożyć skrypt który po kliknięciu na tego markera wyświetli taki dymek a w nim informacje.

[JAVASCRIPT] pobierz, plaintext 
  1. <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=AIzaSyCAwKXBv0ztmmvTirMrOWrfvNyo-kf4ZOA' type='text/javascript'></script> 
  2.  
  3.     </head>   
  4.     <body onload='mapaStart()' onunload='GUnload()'>   
  5. 	<script type='text/javascript'>
  6. 	<!-- var mapa;
  7. 		var geo = new GClientGeocoder(); 
  8.  
  9. 		function mapaStart() 
  10. 		{
  11. 			if(GBrowserIsCompatible())  
  12. 			{
  13. 				mapa = new GMap2(document.getElementById("mapka"),{mapTypes: [G_NORMAL_MAP,G_HYBRID_MAP,G_SATELLITE_MAP]});
  14. 			    mapa.setCenter(new GLatLng(49.630, 20.699), 12);
  15.  
  16. 				// kontrolki mapy
  17. 				mapa.addControl(new GLargeMapControl());
  18. 				var typyMapy = mapa.getMapTypes();    
  19. 				typyMapy[0].getName = function() { return "Mapa";}
  20. 				typyMapy[1].getName= function() { return "Hybryda";}
  21. 				typyMapy[2].getName = function() { return "Satelita";}
  22. 				mapa.addControl(new GMapTypeControl());
  23. 				mapa.addControl(new GOverviewMapControl()); 
  24. 				mapa.addControl(new GScaleControl());
  25. 			}
  26. 		}
  27.  
  28.  
  29.  
  30. 		function geokoduj(adres)
  31. 		{
  32. 			var html='';
  33. 			geo.getLocations(adres, function(wyniki)
  34. 			{
  35. 				// sprawdzamy, czy geokodowanie powiodło się
  36. 				if (wyniki.Status.code == G_GEO_SUCCESS)
  37. 				{
  38. 					// jest więcej niż 1 rezultat
  39. 					if(wyniki.Placemark.length>1)
  40. 					{
  41. 						html+='<strong>Znalazłem kilka pasujących adresów:</strong><ul>';
  42. 						// dla każdego z wyników...
  43. 						for (var j=0; j<wyniki.Placemark.length; j++)
  44. 						{
  45. 							var punkt = wyniki.Placemark[j].Point.coordinates;
  46.  
  47. 							// dodajemy linki, umożliwiające dodanie markera
  48. 							html += '<li><a href="#" onclick="document.getElementById(\'geoAdresy\').style.display=\'none\'; mapa.addOverlay(new GMarker(new GLatLng('+parseFloat(punkt[1])+','+parseFloat(punkt[0])+'))); mapa.setCenter(new GLatLng('+parseFloat(punkt[1])+','+parseFloat(punkt[0])+'),15);  return false;">'+wyniki.Placemark[j].address+'</a>';
  49. 						}
  50. 						html +='</ul>';
  51.  
  52. 						// zmieniamy zawartość tagu geoAdresy i wyświetlamy go
  53. 						document.getElementById('geoAdresy').innerHTML=html;
  54. 						document.getElementById('geoAdresy').style.display='block'; 
  55. 					}
  56. 					else
  57. 					{
  58. 						// ukrywamy obiekt z wieloma wynikami wyszukiwania
  59. 						document.getElementById('geoAdresy').style.display='none';
  60. 						document.getElementById('geoAdresy').innerHTML = '';
  61. 		                var punkt = wyniki.Placemark[0].Point.coordinates;
  62.  
  63. 						// dodajemy bezpośrednio marker
  64. 						mapa.addOverlay(new GMarker(new GLatLng(parseFloat(punkt[1]),parseFloat(punkt[0]))));
  65. 						mapa.setCenter(new GLatLng(parseFloat(punkt[1]),parseFloat(punkt[0])),14);
  66.  
  67.  
  68. 					}
  69. 				}
  70. 				else
  71. 				{
  72. 					// ukrywamy pole wyboru wielu wyników
  73. 					document.getElementById('geoAdresy').style.display='none';
  74. 					document.getElementById('geoAdresy').innerHTML = '';
  75. 					alert('Nie znalazłem podanego adresu!');
  76. 				}
  77. 			});
  78. 		}
[JAVASCRIPT] pobierz, plaintext


Muszę do tego dopisać funkcję, która pobiera wartości z tego kodu i wyświetla dane. Proszę o pomoc
lukasz1985
15.10.2012, 12:06:15
Nie wiem jakie dane mają być wyświetlane w tych okienkach.
Poniżej wersja, która będzie działać.
Tak swoją drogą to proponuję przejść do nowego API google Maps - Ty korzystasz z wersji 2. A najnowsza wersja to wersja nr 3.9

[JAVASCRIPT] pobierz, plaintext 
  1. <html>
  2.     <head>    
  3.         <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=AIzaSyCAwKXBv0ztmmvTirMrOWrfvNyo-kf4ZOA' type='text/javascript'></script> 
  4.  
  5.     </head>   
  6.     <body onload='mapaStart()' onunload='GUnload()'>   
  7.  
  8.         <div id="mapka" style="width: 600px; height: 600px; "></div>
  9.  
  10.         <script type='text/javascript'>
  11.             <!-- 
  12.             var mapa;
  13.             var geo = new GClientGeocoder(); 
  14.             var tresc = 'Info Window lub inne dane HTML'
  15.  
  16.             function mapaStart() 
  17.             {
  18.                 if(GBrowserIsCompatible())  
  19.                 {
  20.                     mapa = new GMap2(document.getElementById("mapka"),{mapTypes: [G_NORMAL_MAP,G_HYBRID_MAP,G_SATELLITE_MAP]});
  21.                     mapa.setCenter(new GLatLng(49.630, 20.699), 12);
  22.  
  23.                     // kontrolki mapy
  24.                     mapa.addControl(new GLargeMapControl());
  25.                     var typyMapy = mapa.getMapTypes();    
  26.                     typyMapy[0].getName = function() { return "Mapa";}
  27.                     typyMapy[1].getName= function() { return "Hybryda";}
  28.                     typyMapy[2].getName = function() { return "Satelita";}
  29.                     mapa.addControl(new GMapTypeControl());
  30.                     mapa.addControl(new GOverviewMapControl()); 
  31.                     mapa.addControl(new GScaleControl());
  32.                 }
  33.             }
  34.  
  35.  
  36.  
  37.             function geokoduj(adres)
  38.             {
  39.                 var html='';
  40.                 geo.getLocations(adres, function(wyniki)
  41.                 {
  42.                     // sprawdzamy, czy geokodowanie powiodło się
  43.                     if (wyniki.Status.code == G_GEO_SUCCESS)
  44.                     {
  45.                         // jest więcej niż 1 rezultat
  46.                         if(wyniki.Placemark.length>1)
  47.                         {
  48.                             html+='<strong>Znalazłem kilka pasujących adresów:</strong><ul>';
  49.                             // dla każdego z wyników...
  50.                             for (var j=0; j<wyniki.Placemark.length; j++)
  51.                             {
  52.                                 var punkt = wyniki.Placemark[j].Point.coordinates;
  53.  
  54.                                 // dodajemy linki, umożliwiające dodanie markera
  55.  
  56.  
  57.  
  58.                                 html += '<li><a href="#" onclick="document.getElementById(\'geoAdresy\').style.display=\'none\'; dodajMarker(new GLatLng('+parseFloat(punkt[1])+','+parseFloat(punkt[0])+')); mapa.setCenter(new GLatLng('+parseFloat(punkt[1])+','+parseFloat(punkt[0])+'),15);  return false;">'+wyniki.Placemark[j].address+'</a>';
  59.                             }
  60.                             html +='</ul>';
  61.  
  62.                             // zmieniamy zawartość tagu geoAdresy i wyświetlamy go
  63.                             document.getElementById('geoAdresy').innerHTML=html;
  64.                             document.getElementById('geoAdresy').style.display='block'; 
  65.                         }
  66.                         else
  67.                         {
  68.                             // ukrywamy obiekt z wieloma wynikami wyszukiwania
  69.                             document.getElementById('geoAdresy').style.display='none';
  70.                             document.getElementById('geoAdresy').innerHTML = '';
  71.                             var punkt = wyniki.Placemark[0].Point.coordinates;
  72.  
  73.                             // dodajemy bezpośrednio marker
  74.  
  75.                             var marker = new GMarker(new GLatLng(parseFloat(punkt[1]),parseFloat(punkt[0])))
  76.                             mapa.addOverlay(marker);
  77.                             GEvent.addListener(marker, 'click', function (latLng) {
  78.                                 mapa.openInfoWindowHtml(latLng, tresc)
  79.                             })
  80.                             mapa.setCenter(new GLatLng(parseFloat(punkt[1]),parseFloat(punkt[0])),14);
  81.  
  82.  
  83.                         }
  84.                     }
  85.                     else
  86.                     {
  87.                         // ukrywamy pole wyboru wielu wyników
  88.                         document.getElementById('geoAdresy').style.display='none';
  89.                         document.getElementById('geoAdresy').innerHTML = '';
  90.                         alert('Nie znalazłem podanego adresu!');
  91.                     }
  92.                 });
  93.             }
  94.  
  95.  
  96.             /**
  97.              * dod
  98.              */
  99.             function dodajMarker(latLng) {
  100.                 var marker = new GMarker(latLng)
  101.                 mapa.addOverlay(marker)
  102.                 GEvent.addListener(marker, 'click', function (latLng) {
  103.                     mapa.openInfoWindowHtml(latLng, tresc)
  104.                 })
  105.  
  106.             }
  107.  
  108.         </script>
  109.  
  110.  
  111.         <input  id="input">
  112.  
  113.         <div id="geoAdresy"></div>
  114.         <div id="click" onclick ="geokoduj(document.getElementById('input').value)">x</div>
  115.  
  116.     </body>
  117. </html>
  118.  
  119.  
  120.  
[JAVASCRIPT] pobierz, plaintext
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.