Visualizzazione dei risultati da 1 a 2 su 2

Discussione: Google maps e closures

  1. #1

    Google maps e closures

    Ciao a tutti.

    Mi sto interessando alle Google Maps (event-closure.htm).

    Il codice javascript è il seguente:
    Codice PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
      <
    head>
        <
    meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <
    title>Google Maps JavaScript API ExampleEvent Closures</title>
        <
    script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=la vostra key; vedi Google maps Concepts" 
        
    type="text/javascript"></script>
        <script type="text/javascript">
    function initialize() {
      var message = ["Secret","message:","I","am", "Cicerone80!"];
     
      if (GBrowserIsCompatible()) {//apertura if
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(40.6634712,14.7951282), 13);
      
        // Creazione di un marker in un determinato punto
          function createMarker(latlng, number) {
          var marker = new GMarker(latlng);
          marker.value = number;
          GEvent.addListener(marker,"click", function() {
            var myHtml = "[b]#" + number + "[/b]
    " + message[number -1];
            map.openInfoWindowHtml(latlng, myHtml);
          });//chiusura function() parametro
          return marker;
        }//chiusura  function createMarker 

        // Add 5 markers to the map at random locations
        // Note that we don't add the secret message to the marker's instance data
        var bounds = map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();
        for (var i = 0; i < 5; i++) {
          var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(),
            southWest.lng() + lngSpan * Math.random());
        map.addOverlay(createMarker(latlng, i + 1));
        }//chiusura ciclo for
      }//chiusura if
    }//chiusura function initialize()
        </script>
      </head>
      <body onload="initialize()" onunload="GUnload()">
        <div id="map_canvas" style="width: 500px; height: 300px"></div>
        

    [url="index.htm"]Home Page[/url]</p>
       </body>
    </html> 
    L'esempio originale &egrave; stato leggermente personalizzato rispetto al contenuto del messaggio segreto e rispetto ai valori delle coordinate geografiche del centro della mappa, che sono quelle di un quartiere di Salerno - Italia, anzich&egrave; di Palo Alto - California.

    Ma il motivo principale è quello di discutere il meccanismo della closure di questo esempio, perfettamente funzionante (basta procurarsi la key, come descritto in "Google Maps Concepts").
    Le closures consentono a funzioni interne di poter accedere a variabili esterne, variabili che non fanno normalmente parte degli oggetti su cui si verificano gli eventi.
    La domanda che mi pongo è la seguente: qual'è la funzione interna che accede ad una variabile esterna non facente parte dell'istanza del marker creato? Qual'è precisamente tale variabile esterna?
    A parer mio, la funzione interna è la function che compare come terzo parametro di GEvent.addListener(marker,"click", function()
    Inoltre, a parer mio, la variabile esterna non facente parte dell'istanza del marker creato è number.
    Secondo voi, è esatto?
    Inoltre, qualcuno di voi può dirmi, in termini semplici, qualcosa di più su scope e closures?
    GRAZIE!

    Cicerone80

  2. #2

    Google maps

    Ciao a tutti.

    Continuo ad interessarmi delle Google maps (Google Map API Concepts).

    Di seguito riporto la traduzione della premessa ed il codice di una applicazione (View example (event-removal.html):

    Premessa.
    Quando un evento ascoltatore non è più necessario, è necessario rimuoverlo. Questo potrebbe anche essere necessario nei casi in cui l'evento è attivato solo una volta. Può risultare difficile rimuovere un ascoltatore di eventi definito attraverso una funzione anonima all'interno di una chiusura. Tuttavia, i metodi addListener (), addDomListener (), bind (), e bindDom () restituiscono un GEventListener gestore, che può essere utilizzato per ritirare eventualmente il gestore.

    L'esempio che segue risponde a un clic mettendo un marcatore sulla mappa. Qualsiasi successivo clic rimuove l'evento ascoltatore. Si noti che il codice RemoveOverlay () non è mai eseguito come un risultato. Inoltre, notare che è possibile rimuovere un evento ascoltatore anche all'interno dello stesso.

    Codice:

    Codice PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
      <
    head>
        <
    meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <
    title>Google Maps JavaScript API ExampleEvent Removal</title>
        <
    script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
                
    type="text/javascript">
        
    </script>
        <script type="text/javascript">

        function MyApplication() {
          this.counter = 0;
          this.map = new GMap2(document.getElementById("map_canvas"));
          this.map.setCenter(new GLatLng(37.4419, -122.1419), 13);
          var myEventListener = GEvent.bind(this.map, "click", this, function(overlay, latlng) {
             if (this.counter == 0) {
               if (latlng) {
                 this.map.addOverlay(new GMarker(latlng))
                 this.counter++;
               } else if (overlay instanceof GMarker) {
                 // This code is never executed as the event listener is 
                 // removed the second time this event is triggered
                 this.removeOverlay(marker)
               }
             } else {
               GEvent.removeListener(myEventListener);
             }
          }); 
        }

        function initialize() {
          var application = new MyApplication();
        }

        </script>
      </head>
      <body onload="initialize()">
        <div id="map_canvas" style="width: 500px; height: 300px"></div>
        <div id="message"></div>
      </body>
    </html> 
    Non essendo un esperto, il mio scopo è quello di documentarmi, e poi cercherò di creare qualche script personale sull'argomento. Ma anche la semplice fase di documentazione presenta talvolta delle difficoltà. Quindi, chiedo un aiutino a voi esperti.

    Ora, io ho capito che il primo clic serve a posizionare un marcatore sulla mappa, ed un secondo clic dovrebbe servire a rimuoverlo. Ma non è così, nel senso che al primo clic viene effettivamente posizionato il marcatore, che però non è rimosso al secondo clic.
    Considerato che è impossibile che Google abbia sbagliato, dove sbaglio io? Più precisamente, qual'è il mio errore di traduzione/interpretazione?

    Colgo l'occasione per far notare che sto rispondendo a me stesso su un quesito nuovo.
    Ora, mi rendo conto che forse non sono partito con il piede giusto, nel senso che questi ] due esempi non sono interessanti, o non sono stati postati in modo interessante, ma l'argomento Google Map API Concepts è comunque interessante!

    Ora, le Feste sono passate. Manca solo la Befana. Posso sperare in una collaborazione-befana per le Google maps, considerato che sono l'esempio più attuale ed avanzato di applicazione di javascript?

    Si dice che la Speranza è l'ultima a morire. Speriamo sia vero anche per me.

    A Tutti Buon Anno.

    Cicerone80.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.