Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Maps API v3 - usuwanie okręgu z formularza, Jak usunąć overlay przy klikaniu w przycisk.
regedarek
post
Post #1





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 12.02.2010

Ostrzeżenie: (0%)
-----

Cześć, po dwóch godzinach zmagań z problemem postanowiłem, zasięgnąć pomocy. Mam skrypt w Google Maps Api v3, który wyświetla markery z okolic wybranych przez użytkownika, poza tym wyświetla okrąg o zadanym promieniu. Jednak nie mogę przebrnąć przez usuwaniu promienia po każdym nowym wybieraniu odległości.

Wg documentacji powinienem użyć funkcji circle.setMap( null ); ale nie mam pomysłu jak to zrobić, już kilka różnych pomysłów, miałem ale nie zadziałały...

Macie jakiś pomysł?

tak wygląda skrypt: Wyszukaj

[HTML] pobierz, plaintext 
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3.     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  4. 	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  5.     <title>Wyszukaj MaMy</title>
  6. 	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
  7.     <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
  8.     <script type="text/javascript">
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
  1.     //<![CDATA[
  2.     var map;
  3.     var markers = [];
  4.     var infoWindow;
  5.     var locationSelect;
  6.  
  7.     function load() {
  8. 		var myLatlng = new google.maps.LatLng(50.068599310532356, 19.963531494140625); // Kraków
  9. 		map = new google.maps.Map(document.getElementById("GoogleMap"), {
  10. 			center: myLatlng,
  11. 			zoom: 12,
  12. 			mapTypeId: 'roadmap',
  13. 			mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
  14. 		});
  15.  
  16. 		infoWindow = new google.maps.InfoWindow();
  17. 		locationSelect = document.getElementById("locationSelect");
  18. 		locationSelect.onchange = function() {
  19. 			var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
  20. 			if (markerNum != "none"){
  21.   				google.maps.event.trigger(markers[markerNum], 'click');
  22. 			}
  23. 		}			
  24. 	} //koniec funkcji load()
  25.  
  26. 	var map = new google.maps.Map(document.getElementById("GoogleMap"), myOptions); // Przypisujemy mapę do konkretnego diva
  27.  
  28. 	function searchLocations() {	
  29. 		var address = document.getElementById("addressInput").value;
  30. 		var geocoder = new google.maps.Geocoder();
  31. 		geocoder.geocode({address: address}, function(results, status) {
  32. 			if (status == google.maps.GeocoderStatus.OK) {
  33.         		searchLocationsNear(results[0].geometry.location);
  34.        		} else { alert(address + ' not found'); }
  35. 		});
  36. 	} //koniec funkcji searchLocations
  37.  
  38.  
  39. 	function clearLocations() {
  40. 		infoWindow.close();
  41.  
  42. 		for (var i = 0; i < markers.length; i++) {
  43. 			markers[i].setMap(null);
  44. 		}
  45. 		markers.length = 0;
  46.  
  47. 		locationSelect.innerHTML = "";
  48. 		var option = document.createElement("option");
  49. 		option.value = "none";
  50. 		option.innerHTML = 'Lista Mam w rejonie ' + document.getElementById('radiusSelect').value + ' kilometrów';
  51. 		locationSelect.appendChild(option);
  52. 	} //koniec clearLocations()
  53.  
  54. 	function searchLocationsNear(center) {
  55. 		clearLocations(); 
  56.  
  57. 		// -------------------------------------- //
  58. 		// --------------	OKRĄG	------------- //
  59. 		// -------------------------------------- //
  60. 		var myLatlng = new google.maps.LatLng(50.068599310532356, 19.963531494140625);
  61. 		var selector = document.getElementById("radiusSelect");
  62. 		var radius1 = selector.options[selector.selectedIndex].innerHTML;
  63. 		var circle = new google.maps.Circle({radius: radius1*1050, center: myLatlng}); 
  64. 		var radius1 = 10000;
  65. 		circle.fillColor = '#ffffff';
  66. 		circle.setMap(map);
  67.  
  68. 		var radius = document.getElementById('radiusSelect').value;
  69. 		var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
  70. 		downloadUrl(searchUrl, function(data) {
  71. 			var xml = parseXml(data);
  72. 			var markerNodes = xml.documentElement.getElementsByTagName("marker");
  73. 			var bounds = new google.maps.LatLngBounds();
  74. 			for (var i = 0; i < markerNodes.length; i++) {
  75. 				var nazwa = markerNodes[i].getAttribute("nazwa");
  76. 				var address = markerNodes[i].getAttribute("adres");
  77. 				var kategoria = markerNodes[i].getAttribute("kategoria");
  78. 				var distance = parseFloat(markerNodes[i].getAttribute("distance"));
  79. 				var latlng = new google.maps.LatLng(
  80. 				parseFloat(markerNodes[i].getAttribute("lat")),
  81. 				parseFloat(markerNodes[i].getAttribute("lng")));
  82.  
  83. 				createOption(nazwa, distance, i, address, kategoria);
  84. 				createMarker(latlng, nazwa, address, kategoria);
  85. 				bounds.extend(latlng);
  86. 			} //koniec for/downloadUrl/searchLocationsNear
  87.  
  88. 			map.fitBounds(bounds);
  89. 			locationSelect.style.visibility = "visible";
  90. 			locationSelect.onchange = function() {
  91. 				var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
  92. 				google.maps.event.trigger(markers[markerNum], 'click');
  93. 			};
  94. 		}); //koniec downloadUrl/searchLocationsNear
  95. 	} //koniec searchLocationsNear
  96.  
  97. 	function createMarker(latlng, nazwa, address, kategoria) {
  98. 		var html = "<b>" + nazwa + "</b> <br>" + address;
  99. 		if (kategoria == "przedszkola") {
  100. 			var image = 'img/house2.png'; }
  101. 		else {  var image = 'img/mama2.png'; }
  102. 		var marker = new google.maps.Marker({
  103. 			map: map,
  104. 			position: latlng,
  105. 			icon: image
  106. 		});
  107.  
  108. 		google.maps.event.addListener(marker, 'click', function() {
  109. 			infoWindow.setContent(html);
  110. 			infoWindow.open(map, marker);
  111. 		});
  112. 		markers.push(marker);
  113. 	} //koniec createMarker
  114.  
  115. 	function createOption(nazwa, distance, num, address, kategoria) {
  116. 		var option = document.createElement("option");
  117. 		option.value = num;
  118. 		if (kategoria == "przedszkola") {                                    
  119. 			option.innerHTML = "------ Przedszkole w odległości " + distance.toFixed(1) + " kilometrów od Ciebie o numerze: " + nazwa + " i znajduje się na ulicy "   + address; }
  120. 		else { option.innerHTML = nazwa + " mieszka " + distance.toFixed(1) + " kilometrów od Ciebie na ulicy " + address; }
  121. 		locationSelect.appendChild(option);
  122.     } //koniec createOption
  123.  
  124. 	function downloadUrl(url, callback) {
  125. 		var request = window.ActiveXObject ?
  126. 		new ActiveXObject('Microsoft.XMLHTTP') :
  127. 		new XMLHttpRequest;
  128.  
  129. 		request.onreadystatechange = function() {
  130.         if (request.readyState == 4) {
  131.           request.onreadystatechange = doNothing;
  132.           callback(request.responseText, request.status);
  133.         } //koniec if/downloadUrl
  134.       };
  135.       request.open('GET', url, true);
  136.       request.send(null);
  137.     } //koniec downloadUrl
  138.  
  139.     function parseXml(str) {
  140. 		if (window.ActiveXObject) {
  141. 		    var doc = new ActiveXObject('Microsoft.XMLDOM');
  142. 		    doc.loadXML(str);
  143. 			return doc;
  144. 		} else if (window.DOMParser) {
  145. 			return (new DOMParser).parseFromString(str, 'text/xml');
  146. 		  }
  147.     } //koniec parseXml
  148.  
  149.     function doNothing() {}
  150.     function play(){}
  151.     //]]>
[JAVASCRIPT] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. 	</script>  
  2. </head>
  3. <body style="margin:0px; padding:0px;" onload="load()"> 
  4.    	<div id="GoogleMap">
  5.    	<!--Tutaj wyświetla mapę -->   	
  6.    	</div>
  7. 	<div id="dodaj" align=center>
  8. 		<a href="http://regedarek.2ap.pl/googlemap/">Dodaj Marker</a>
  9. 	</div>
  10. 	<div id="tekst">Wyświetl wszystkie mamy w rejonie:</div>
  11.     <div id="wyszukaj" align=center>
  12.     	<!--Liczy promień od tych współrzędnych -->
  13. 		<input type="text" style="visibility:hidden" value="50.068599310532356, 19.963531494140625" id="addressInput" size="10"/> 
  14. 		<select id="radiusSelect" onchange="play()">
  15. 			<option value="2" selected>2</option>
  16. 			<option value="5">5</option>
  17. 			<option value="20">20</option>
  18. 		</select>
  19.     	<input class="submit" type="submit" onclick="searchLocations()" value="Wyszukaj"/>
  20.     </div>
  21.     <div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div>
  22.     <!--Tutaj wyświetla pasek z listą mam i ich odległościami -->
  23.     <div id="map" style="width: 100%; height: 80%"></div>
  24. </body>
  25. </html>
[HTML] pobierz, plaintext


Ten post edytował regedarek 10.02.2011, 14:34:27
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 24.08.2025 - 20:06
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn