Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [inne][PHP]Google Maps - centrowanie markerów
Forum PHP.pl > Forum > Przedszkole
northwest
5.06.2010, 11:23:05
Witam serdecznie,
mam taką aplikację:
[PHP] pobierz, plaintext 
  1. <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
  2.  
  3. <body onload = "mapaStart()";>
  4. <script type="text/javascript">     
  5.         <!--   
  6.             var mapa; // obiekt globalny  
  7.  
  8.             function dodajMarker(opcjeMarkera)  
  9.             {  
  10.                 opcjeMarkera.map = mapa;  
  11.                 var marker = new google.maps.Marker(opcjeMarkera);
  12. 					 google.maps.event.addListener(marker,'click',function(zdarzenie)  
  13.     {  
  14.         dymek.setContent('<strong>Kliknąłeś na marker!</strong><br />Współrzędne GPS markera:<br />'+marker.getPosition());    
  15.         dymek.setPosition(marker.getPosition());    
  16.         dymek.open(mapa);  
  17.     });    
  18.             }  
  19.  
  20.             function mapaStart()    
  21.             {    
  22.  
  23.                 var wspolrzedne = new google.maps.LatLng(53.41935400090768,14.58160400390625);  
  24.                 var opcjeMapy = {  
  25.                     zoom: 10,  
  26.                     center: wspolrzedne,  
  27.                     mapTypeId: google.maps.MapTypeId.SATELLITE  
  28.                 };  
  29.                 mapa = new google.maps.Map(document.getElementById("mapa"), opcjeMapy); 
  30.  
  31.  
  32.                 // wspólne cechy ikon  
  33.                 var rozmiar = new google.maps.Size(32,32);  
  34.                 var punkt_startowy = new google.maps.Point(0,0);  
  35.                 var punkt_zaczepienia = new google.maps.Point(16,16);  
  36.  
  37.                 // ikonki  
  38.                 var ikona1 = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal2/icon38.png", rozmiar, punkt_startowy, punkt_zaczepienia);  
  39.                 var ikona2 = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal4/icon23.png", rozmiar, punkt_startowy, punkt_zaczepienia);  
  40.                 var ikona3 = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal3/icon13.png", rozmiar, punkt_startowy, punkt_zaczepienia);  
  41.  
  42.                 dodajMarker({position: new google.maps.LatLng(53.4203,14.7011), title: 'Restauracja #1', icon: ikona1});  
  43.                 dodajMarker({position: new google.maps.LatLng(13.3902,14.7202), title: 'Restauracja #2', icon: ikona1});  
  44.                 dodajMarker({position: new google.maps.LatLng(53.4101,14.6033), title: 'Myjnia', icon: ikona2});  
  45.                 dodajMarker({position: new google.maps.LatLng(53.4014,14.5104), title: 'Tu byłem 6 razy', icon: ikona3});  
  46.  
  47.             }    
  48.         -->  
  49.         </script>     
[PHP] pobierz, plaintext


Nie wiem jak zrobić:
- dymek z opisem po kliknięciu na markera (dla każdego markera będzie inny text)
- centrowaniem markerów (chciałbym żeby mapka zawsze pokazywała wszystkie markery jakie są na mapie - przy optymalnym zoomie).

Markery (położenie) będę sobie generował w PHP :-)

Wie ktoś może jak to zrobić?


Z góry dzięki za pomoc,
northwest
thek
5.06.2010, 12:19:15
Podam Ci wskazówki do każdego z problemów, bo są one tak często wałkowane, że google ma setki odpowiedzi na nie.
Problem1: Dla markerów definiuj zdarzenie "click".
Problem2: Przechwytuj zakres kombinując ze słowem "bounds" winksmiley.jpg Istnieje gotowa funkcja tym się zajmująca w API smile.gif
northwest
6.06.2010, 13:01:04
witam ponownie,
zrobiłem sobie coś takiego:
- plik points.php (generujący pliki):
Kod
[{"idobiektu":"points.php?idobiektu=0000","lat":"1.23","lng":"3.45","nazwa":"nazwa","ikonka":"market.png","etykietka":"opis","coto":"punkt"},     
{"idobiektu":"points.php?idobiektu=0000","lat":"1.43","lng":"3.15","nazwa":"nazwa","ikonka":"market.png","etykietka":"opis","coto":"punkt"}]

- plik maps.js
[PHP] pobierz, plaintext 
  1. var map = null;
  2. var refreshTime = 5000;
  3. var prevData = null;
  4. var map;
  5. var geocoder;
  6. var selectedMarker;
  7.  
  8. function load(){
  9.     if (GBrowserIsCompatible()) {
  10.         map = new GMap2(document.getElementById("mapa"));
  11.         map.addControl(new GLargeMapControl());
  12.         map.addControl(new GScaleControl());
  13.         map.addControl(new GMapTypeControl());
  14.         geocoder = new GClientGeocoder();
  15.         map.enableContinuousZoom();
  16.         map.enableDoubleClickZoom();
  17.         map.enableScrollWheelZoom();
  18.         map.setCenter(new GLatLng(52.173931692568, 18.8525390625), 	
  19. 5);
  20.  
  21.         reloadPoints();
  22.     }
  23. }
  24.  
  25. function getAddress(){
  26.     //selectedMarker = this;
  27.     //geocoder.getLocations(this.getLatLng(), showAddress);
  28. }
  29.  
  30. function showAddress(response){
  31.     var latlng = selectedMarker.getLatLng();
  32.     var place = response.Placemark[0];
  33.     var description = selectedMarker.value + '<br/>Adres: ' + 	
  34. place.address + '<br /><br/>';
  35.     selectedMarker.openInfoWindowHtml(description);
  36. }
  37.  
  38. function addPoints(data){
  39.     if (prevData != data || data == null) {
  40.         prevData = data;
  41.         eval("points = (" + data + ")");
  42.         pointsCount = points.length;
  43.         map.clearOverlays();
  44.         var maxlng = 0;
  45.         var maxlat = 0;
  46.         var minlng = 0;
  47.         var minlat = 0;
  48. 		var licz=0;
  49.         for (var i = 0; i < pointsCount; i++) {
  50.             var etykietka = points[i]['etykietka'];
  51.             var point = new GLatLng(points[i]['lat'], 	
  52. points[i]['lng']);
  53.             map.addOverlay(createMarker(point, points[i]['nazwa'], 	
  54. points[i]['ikonka'], map));
  55.             var label = new ELabel(new GLatLng(points[i]['lat'], 	
  56. points[i]['lng']), "<div 	
  57. style=\"background-color:#ccccff;border:2px solid 	
  58. black\"><small>" + etykietka + 	
  59. "</small></div>", null, new GSize(6, -30), 75);
  60.             map.addOverlay(label);
  61.             if (points[i]['coto'] == 'punkt') {
  62.                 if (licz == 0) {
  63. 					minlat = points[i]['lat'];
  64. 				}
  65. 				else {
  66. 					minlat = Math.min(points[i]['lat'], minlat);
  67. 				}
  68. 				if (licz == 0) {
  69. 					maxlat = points[i]['lat'];
  70. 				}
  71. 				else {
  72. 					maxlat = Math.max(points[i]['lat'], maxlat);
  73. 				}
  74. 				if (licz == 0) {
  75. 					minlng = points[i]['lng'];
  76. 				}
  77. 				else {
  78. 					minlng = Math.min(points[i]['lng'], minlng);
  79. 				}
  80.                 if (licz == 0) {
  81. 					maxlng = points[i]['lng'];
  82. 				}
  83. 				else {
  84. 					maxlng = Math.max(points[i]['lng'], maxlng);
  85. 				}
  86. 				licz++;
  87.             }
  88.         }
  89.         var dlat = (maxlat - minlat) * 0.1;
  90.         var dlng = (maxlng - minlng) * 0.1;
  91.         var min = new GLatLng(minlat - dlat, minlng - dlng);
  92.         var max = new GLatLng(maxlat + dlat, maxlng + dlng);
  93.         var bounds = new GLatLngBounds(min, max);
  94.  
  95.  
  96.  
  97.         map.setZoom(map.getBoundsZoomLevel(bounds));
  98.         map.setCenter(bounds.getCenter());
  99.  
  100.  
  101.     }
  102. }
  103.  
  104. function createMarker(point, nazwa, ikonka, map){
  105.  
  106.     var icon = new GIcon();
  107.     icon.image = ikonka;
  108.     icon.iconAnchor = new GPoint(23, 23);
  109.     icon.infoWindowAnchor = new GPoint(23, 23);
  110.     var marker = new GMarker(point, icon);
  111.     marker.value = nazwa;
  112.     //marker.openExtInfoWindow(marker, "click", getAddress);
  113.     //GEvent.addListener(marker, "click", getAddress);
  114.     GEvent.addListener(marker, "click");
  115.     return marker;
  116. }
  117.  
  118.  
  119.  
  120.  
  121. function reloadPoints(){
  122.     loadPointData();
  123.     //setTimeout(reloadPoints, refreshTime);
  124. }
[PHP] pobierz, plaintext


Mapka ładnie mi się wyświetla, centruje smile.gif problemem jest tylko
to, że jak oddalę zoom, kliknę na ikonkę to wyskakuje js error
jakiś :/


Szczegóły błędu na stronie sieci Web

Agent użytkownika: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT
6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR
3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C;
.NET4.0E)
Sygnatura czasowa: Sun, 6 Jun 2010 11:56:20 UTC

Wiadomość: 'this.Qg' jest pusty lub nie jest obiektem
Wiersz: 241
Znak: 29
Kod: 0
Identyfikator URI:
http://maps.gstatic.com/intl/pl_ALL/mapfil...ps2.api/main.js

dziwne jest też to, że okienko z informacjami wyświetla się
ciągne, a nie po kliknięciu...

Wie ktoś może co jest źle w tym?

Mogę podać URL do tego...


Dziękuje za pomoc
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.