Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

[JS]Maps API v3 usuwanie Circle

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

[JS]Maps API v3 usuwanie Circle

Post 10.02.2011, 15:24:04

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

Kod: Zaznacz cały
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Wyszukaj MaMy</title>
   <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    var map;
    var markers = [];
    var infoWindow;
    var locationSelect;

    function load() {
      var myLatlng = new google.maps.LatLng(50.068599310532356, 19.963531494140625); // Kraków
      map = new google.maps.Map(document.getElementById("GoogleMap"), {
         center: myLatlng,
         zoom: 12,
         mapTypeId: 'roadmap',
         mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
      });
      
      infoWindow = new google.maps.InfoWindow();
      locationSelect = document.getElementById("locationSelect");
      locationSelect.onchange = function() {
         var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
         if (markerNum != "none"){
              google.maps.event.trigger(markers[markerNum], 'click');
         }
      }         
   } //koniec funkcji load()

   var map = new google.maps.Map(document.getElementById("GoogleMap"), myOptions); // Przypisujemy mapę do konkretnego diva
   
   function searchLocations() {   
      var address = document.getElementById("addressInput").value;
      var geocoder = new google.maps.Geocoder();
      geocoder.geocode({address: address}, function(results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
              searchLocationsNear(results[0].geometry.location);
             } else { alert(address + ' not found'); }
      });
   } //koniec funkcji searchLocations

   
   function clearLocations() {
      infoWindow.close();

      for (var i = 0; i < markers.length; i++) {
         markers[i].setMap(null);
      }
      markers.length = 0;

      locationSelect.innerHTML = "";
      var option = document.createElement("option");
      option.value = "none";
      option.innerHTML = 'Lista Mam w rejonie ' + document.getElementById('radiusSelect').value + ' kilometrów';
      locationSelect.appendChild(option);
   } //koniec clearLocations()

   function searchLocationsNear(center) {
      clearLocations();

      // -------------------------------------- //
      // --------------   OKRĄG   ------------- //
      // -------------------------------------- //
      var myLatlng = new google.maps.LatLng(50.068599310532356, 19.963531494140625);
      var selector = document.getElementById("radiusSelect");
      var radius1 = selector.options[selector.selectedIndex].innerHTML;
      var circle = new google.maps.Circle({radius: radius1*1050, center: myLatlng});
      var radius1 = 10000;
      circle.fillColor = '#ffffff';
      circle.setMap(map);

      var radius = document.getElementById('radiusSelect').value;
      var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
      downloadUrl(searchUrl, function(data) {
         var xml = parseXml(data);
         var markerNodes = xml.documentElement.getElementsByTagName("marker");
         var bounds = new google.maps.LatLngBounds();
         for (var i = 0; i < markerNodes.length; i++) {
            var nazwa = markerNodes[i].getAttribute("nazwa");
            var address = markerNodes[i].getAttribute("adres");
            var kategoria = markerNodes[i].getAttribute("kategoria");
            var distance = parseFloat(markerNodes[i].getAttribute("distance"));
            var latlng = new google.maps.LatLng(
            parseFloat(markerNodes[i].getAttribute("lat")),
            parseFloat(markerNodes[i].getAttribute("lng")));
            
            createOption(nazwa, distance, i, address, kategoria);
            createMarker(latlng, nazwa, address, kategoria);
            bounds.extend(latlng);
         } //koniec for/downloadUrl/searchLocationsNear
         
         map.fitBounds(bounds);
         locationSelect.style.visibility = "visible";
         locationSelect.onchange = function() {
            var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
            google.maps.event.trigger(markers[markerNum], 'click');
         };
      }); //koniec downloadUrl/searchLocationsNear
   } //koniec searchLocationsNear

   function createMarker(latlng, nazwa, address, kategoria) {
      var html = "<b>" + nazwa + "</b> <br>" + address;
      if (kategoria == "przedszkola") {
         var image = 'img/house2.png'; }
      else {  var image = 'img/mama2.png'; }
      var marker = new google.maps.Marker({
         map: map,
         position: latlng,
         icon: image
      });
      
      google.maps.event.addListener(marker, 'click', function() {
         infoWindow.setContent(html);
         infoWindow.open(map, marker);
      });
      markers.push(marker);
   } //koniec createMarker
      
   function createOption(nazwa, distance, num, address, kategoria) {
      var option = document.createElement("option");
      option.value = num;
      if (kategoria == "przedszkola") {                                   
         option.innerHTML = "------ Przedszkole w odległości " + distance.toFixed(1) + " kilometrów od Ciebie o numerze: " + nazwa + " i znajduje się na ulicy "   + address; }
      else { option.innerHTML = nazwa + " mieszka " + distance.toFixed(1) + " kilometrów od Ciebie na ulicy " + address; }
      locationSelect.appendChild(option);
    } //koniec createOption

   function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request.responseText, request.status);
        } //koniec if/downloadUrl
      };
      request.open('GET', url, true);
      request.send(null);
    } //koniec downloadUrl

    function parseXml(str) {
      if (window.ActiveXObject) {
          var doc = new ActiveXObject('Microsoft.XMLDOM');
          doc.loadXML(str);
         return doc;
      } else if (window.DOMParser) {
         return (new DOMParser).parseFromString(str, 'text/xml');
        }
    } //koniec parseXml

    function doNothing() {}
    function play(){}
    //]]>
   </script> 
</head>
<body style="margin:0px; padding:0px;" onload="load()">
      <div id="GoogleMap">
      <!--Tutaj wyświetla mapę -->      
      </div>
   <div id="dodaj" align=center>
      <a href="http://regedarek.2ap.pl/googlemap/">Dodaj Marker</a>
   </div>
   <div id="tekst">Wyświetl wszystkie mamy w rejonie:</div>
    <div id="wyszukaj" align=center>
       <!--Liczy promień od tych współrzędnych -->
      <input type="text" style="visibility:hidden" value="50.068599310532356, 19.963531494140625" id="addressInput" size="10"/>
      <select id="radiusSelect" onchange="play()">
         <option value="2" selected>2</option>
         <option value="5">5</option>
         <option value="20">20</option>
      </select>
       <input class="submit" type="submit" onclick="searchLocations()" value="Wyszukaj"/>
    </div>
    <div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div>
    <!--Tutaj wyświetla pasek z listą mam i ich odległościami -->
    <div id="map" style="width: 100%; height: 80%"></div>
</body>
</html>
regedarek
Posty: 17
Dołączył(a): 15.04.2006

Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 2 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 51770 zarejestrowanych użytkowników.
Najnowszy użytkownik: mitchellnews


Nasi użytkownicy napisali:

  • 938050 wiadomości
  • w 247613 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)