Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP]MarkerCluster jak dodać...
Forum PHP.pl > Forum > Przedszkole
EWANS
23.02.2014, 20:34:25
Witam korzystając z przykładu kolegi chciałbym opalić markerCluster na mapie i za chiny nie potrafię tego zrobić... Czy ktoś może powiedzieć co jest źle w kodzie questionmark.gif

[PHP] pobierz, plaintext 
  1. <code=php>
  2. <html xmlns="http://www.w3.org/1999/xhtml">      
  3.     <head>      
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      
  5.          <title>Mapka próbna...</title>    
  6.         <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>  
  7.         <script src="script/markerclusterer.js" type="text/javascript"></script>        
  8.     </head>      
  9.     <body onload="mapaStart()">      
  10.         <script type="text/javascript">   
  11.  
  12.         var mapa;
  13.         var dymek = new google.maps.InfoWindow();
  14.         var markerCluster;
  15.  
  16.  
  17.  
  18.         function dodajMarker(lat,lng,txt)
  19.         {
  20.             // tworzymy marker
  21.             var opcjeMarkera =   
  22.             {  
  23.                 position: new google.maps.LatLng(lat,lng),  
  24.                 map: mapa
  25.  
  26.             }  
  27.             var marker = new google.maps.Marker(opcjeMarkera);
  28.             marker.txt=txt;
  29.  
  30.             google.maps.event.addListener(marker,"click",function()
  31.             {
  32.                 dymek.setContent(marker.txt);
  33.                 dymek.open(mapa,marker);
  34.             });
  35.  
  36.             return marker;
  37.         }
  38.  
  39.         function mapaStart()   
  40.         {   
  41.             var wspolrzedne = new google.maps.LatLng(52.04, 19.28);
  42.             var opcjeMapy = {
  43.               zoom: 6,
  44.               center: wspolrzedne,
  45.               mapTypeId: google.maps.MapTypeId.ROADMAP
  46.             };
  47.  
  48.             mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);
  49.             markerCluster = new MarkerCluster(mapa);
  50.  
  51.  
  52.  
  53.  
  54.             var marker1 = dodajMarker(53.439068183003684,14.518346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA A<br/>53.439068183003684');
  55.             var marker2 = dodajMarker(53.42235902258507,14.489099979400635,'<strong>NAZWA FIRMY:</strong><br /> FIRMA B<br/>53.42235902258507');
  56.             var marker3 = dodajMarker(54.439068183003684,15.518346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_AD<br/>54.439068183003684');
  57.             var marker4 = dodajMarker(52.439068183003684,18.518346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS<br/>52.439068183003684');
  58.             var marker5 = dodajMarker(52.139068183003684,18.118346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS1<br/>52.139068183003684');
  59.             var marker6 = dodajMarker(51.139068183003684,18.118346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS12<br/>51.139068183003684');
  60.             var marker7 = dodajMarker(51.339068183003684,18.318346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS123<br/>51.339068183003684');
  61.             var marker8 = dodajMarker(51.839068183003684,18.818346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS1234<br/>51.839068183003684');
  62.             var marker9 = dodajMarker(51.739068183003684,18.728346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS12345<br/>51.739068183003684');
  63.             var marker10 = dodajMarker(51.739068183003684,17.728346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS443<br/>51.739068183003684');
  64.             var marker11 = dodajMarker(51.839068183003684,17.928346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS443<br/>51.839068183003684');
  65.             var marker12 = dodajMarker(53.839068183003684,18.928346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS443<br/>53.839068183003684');
  66.             var marker13 = dodajMarker(52.839068183003684,14.928346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS443<br/>52.839068183003684');
  67.             var marker14 = dodajMarker(52.839068183003684,15.928346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS443<br/>52.839068183003684');
  68.             var marker15 = dodajMarker(52.839068183003684,16.928346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS443<br/>52.839068183003684'); 
  69.  
  70.  
  71.  
  72.  }   
  73.         </script>   
  74.  
  75.         <div id="selektor" style="width: 100%; height: 50px;  background: green;">
  76.         TUTAJ BĘDĄ POLA SELEKCJI 
  77.         </div> 
  78.  
  79.         <div id="mapka" style="width: 100%; height: 500px;">
  80.         <!-- tu będzie mapa -->   
  81.         </div>   
  82.         <p id="info">
  83.             Wiele markerów, każdy z własnym opisem i inną ikoną.
  84.         </p>
  85.     </body>      
  86. </html>   
[PHP] pobierz, plaintext
Damonsson
23.02.2014, 21:03:57
Trochę namieszałeś, spróbuj tak:

[JAVASCRIPT] pobierz, plaintext 
  1.         var mapa;
  2.         var dymek = new google.maps.InfoWindow();
  3. var markers = [];
  4. var marker = {};
  5. mapaStart();
  6.  
  7.  
  8.         function dodajMarker(lat,lng,txt)
  9.         {
  10.             // tworzymy marker
  11.             var opcjeMarkera =   
  12.             {  
  13.                 position: new google.maps.LatLng(lat,lng),  
  14.                 map: mapa
  15.  
  16.             }  
  17.             marker = new google.maps.Marker(opcjeMarkera);
  18.             marker.txt=txt;
  19.  
  20.             google.maps.event.addListener(marker,"click",function()
  21.             {
  22.                 dymek.setContent(marker.txt);
  23.                 dymek.open(mapa,marker);
  24.             });
  25.  
  26.           markers.push(marker);
  27.         }
  28.  
  29.         function mapaStart()   
  30.         {   
  31.             var wspolrzedne = new google.maps.LatLng(52.04, 19.28);
  32.             var opcjeMapy = {
  33.               zoom: 6,
  34.               center: wspolrzedne,
  35.               mapTypeId: google.maps.MapTypeId.ROADMAP
  36.             };
  37.  
  38.             mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);
  39.  
  40.  
  41.  
  42.  
  43.             var marker1 = dodajMarker(53.439068183003684,14.518346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA A<br/>53.439068183003684');
  44.             var marker1 = dodajMarker(53.42235902258507,14.489099979400635,'<strong>NAZWA FIRMY:</strong><br /> FIRMA B<br/>53.42235902258507');
  45.             var marker1 = dodajMarker(54.439068183003684,15.518346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_AD<br/>54.439068183003684');
  46.             var marker4 = dodajMarker(52.439068183003684,18.518346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS<br/>52.439068183003684');
  47.             var marker5 = dodajMarker(52.139068183003684,18.118346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS1<br/>52.139068183003684');
  48.             var marker6 = dodajMarker(51.139068183003684,18.118346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS12<br/>51.139068183003684');
  49.             var marker7 = dodajMarker(51.339068183003684,18.318346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS123<br/>51.339068183003684');
  50.             var marker8 = dodajMarker(51.839068183003684,18.818346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS1234<br/>51.839068183003684');
  51.             var marker9 = dodajMarker(51.739068183003684,18.728346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS12345<br/>51.739068183003684');
  52.             var marker10 = dodajMarker(51.739068183003684,17.728346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS443<br/>51.739068183003684');
  53.             var marker11 = dodajMarker(51.839068183003684,17.928346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS443<br/>51.839068183003684');
  54.             var marker12 = dodajMarker(53.839068183003684,18.928346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS443<br/>53.839068183003684');
  55.             var marker13 = dodajMarker(52.839068183003684,14.928346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS443<br/>52.839068183003684');
  56.             var marker14 = dodajMarker(52.839068183003684,15.928346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS443<br/>52.839068183003684');
  57.             var marker15 = dodajMarker(52.839068183003684,16.928346786499023,'<strong>NAZWA FIRMY:</strong><br /> FIRMA_ADS443<br/>52.839068183003684'); 
  58.  
  59.  
  60.             var markerCluster = new MarkerClusterer(mapa, markers);
  61.  
  62.  }   
[JAVASCRIPT] pobierz, plaintext


Edit: aha widzę, że masz 
[JAVASCRIPT] pobierz, plaintext 
  1. mapaStart(); 
[JAVASCRIPT] pobierz, plaintext

w body onload. To już nie musisz w Script powielać, możesz zostawić tak jak masz. Choć poprawniej jest nie mieszać HTML z JavaScript. Czyli zrobić to tak jak zrobiłem i wywalić z body onload.
EWANS
23.02.2014, 21:48:35
Dzięki serdeczne działa super już widzę co źle zrobiłem przeanalizowałem to i dzięki jeszcze raz 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.