Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML]Odświeżanie markerów google maps
Forum PHP.pl > Forum > Przedszkole
olszam
18.06.2014, 19:04:16
Mam zwykły skrypcik na losowe markery w mapce, ale niestety nie mogę sobie poradzić z odświeżaniem markerów co daną sekundę. Próbowałem z setInterval odświeżyć punkty, ale zamiast odświeżyć to dodawały kolejne markery, z setMap też próbowałem ale nie wychodzi mi.

Kod jaki mam na ten czas:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	<style>
  4.       html, body, #map {
  5.         height: 100%;
  6.         margin: 0px;
  7.         padding: 0px
  8.       }
  9.     </style>
  10.     <script src="http://maps.google.com/maps/api/js?v=3.exp" type="text/javascript"></script>
  11.  
  12. </head>
  13. <body>
  14. <div id="map"></div>
  15.  
  16.   <script type="text/javascript">
  17.  
  18.     var map = new google.maps.Map(document.getElementById('map'), {
  19.       zoom: 3,
  20.       center: new google.maps.LatLng(0, 0),
  21.       mapTypeId: google.maps.MapTypeId.ROADMAP
  22.     });
  23.  
  24.     var infowindow = new google.maps.InfoWindow();
  25.     var marker , i;
  26.  
  27. 	var locations = [
  28.       ['random5', Math.floor((Math.random() * 100) + 1), Math.floor((Math.random() * 100) + 1), 5],
  29.       ['random4', Math.floor((Math.random() * 100) + 1), Math.floor((Math.random() * 100) + 1), 4],
  30.       ['random3', Math.floor((Math.random() * 100) + 1), Math.floor((Math.random() * 100) + 1), 3],
  31.       ['random2', Math.floor((Math.random() * 100) + 1), Math.floor((Math.random() * 100) + 1), 2],
  32.       ['random1', Math.floor((Math.random() * 100) + 1), Math.floor((Math.random() * 100) + 1), 1]
  33.     ];
  34.  
  35.     for (i = 0; i < locations.length; i++) {
  36.       marker = new google.maps.Marker({
  37.         position: new google.maps.LatLng(locations[i][1], locations[i][2]),
  38.         map: map
  39.       });
  40.  
  41.       google.maps.event.addListener(marker, 'click', (function(marker, i) {
  42.         return function() {
  43.           infowindow.setContent(locations[i][0]);
  44.           infowindow.open(map, marker);
  45.         }
  46.       })(marker, i));
  47.     }
  48.   </script>
  49.   </body>
  50.   </html>
[HTML] pobierz, plaintext
Turson
18.06.2014, 19:12:29
setInterval zadziała, ale przed dodaniem musisz wyczyścić tablicę z markerami, żeby dodać nowy
https://developers.google.com/maps/document...er-remove?hl=pl
olszam
18.06.2014, 21:54:11
byłem już na tej stronie i z początku nie pomogło bo trochę się pogubiłem porównując jeden kod z drugim, posiedziałem trochę i działa.
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	<style>
  4.       html, body, #map {
  5.         height: 100%;
  6.         margin: 0px;
  7.         padding: 0px
  8.       }
  9.     </style>
  10.     <script src="http://maps.google.com/maps/api/js?v=3.exp" type="text/javascript"></script>
  11.  
  12. </head>
  13. <body>
  14. <div id="map"></div>
  15.  
  16.   <script type="text/javascript">
  17.  
  18.     var map = new google.maps.Map(document.getElementById('map'), {
  19.       zoom: 3,
  20.       center: new google.maps.LatLng(0, 0),
  21.       mapTypeId: google.maps.MapTypeId.ROADMAP
  22.     });
  23.  
  24.     var infowindow = new google.maps.InfoWindow();
  25.     var marker, i, locations;
  26. 	var markers = [];
  27.  
  28. 	setInterval(function(){
  29.  
  30. 	locations = [
  31.       ['random5', Math.floor((Math.random() * 100) + 1), Math.floor((Math.random() * 100) + 1), 5],
  32.       ['random4', Math.floor((Math.random() * 100) + 1), Math.floor((Math.random() * 100) + 1), 4],
  33.       ['random3', Math.floor((Math.random() * 100) + 1), Math.floor((Math.random() * 100) + 1), 3],
  34.       ['random2', Math.floor((Math.random() * 100) + 1), Math.floor((Math.random() * 100) + 1), 2],
  35.       ['random1', Math.floor((Math.random() * 100) + 1), Math.floor((Math.random() * 100) + 1), 1]
  36.     ];
  37. 	setAllMap(null);
  38.     for (i = 0; i < locations.length; i++) {
  39.  
  40.       marker = new google.maps.Marker({
  41.         position: new google.maps.LatLng(locations[i][1], locations[i][2]),
  42.         map: map
  43.       });
  44. 	  markers.push(marker);
  45.       google.maps.event.addListener(marker, 'click', (function(marker, i) {
  46.         return function() {
  47.           infowindow.setContent(locations[i][0]);
  48.           infowindow.open(map, marker);
  49.         }
  50.       })(marker, i));
  51.  
  52.     }
  53. 	}, 3000);
  54.  
  55. 	function setAllMap(map) {
  56. 		  for (var i = 0; i < markers.length; i++) {
  57. 			markers[i].setMap(map);
  58. 		  }
  59. 		}
  60.   </script>
  61.   </body>
  62.   </html>
[HTML] pobierz, plaintext

i jeszcze pytanie, które ze zdarzeń najlepiej by pasowało tak aby przy załadowaniu markerów pojawiła się chmurka na wszystkich markerach?
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.