IT:OpenLayers Marker Example

From OpenStreetMap Wiki
Jump to navigation Jump to search

Questo è un semplice esempio di aggiunta di un marker a una mappa OpenLayers.

Esempio

Questo è il codice richiesto (Copialo in un nuovo file HTML e visualizzalo nel browser) :

<html><body>
  <div id="DivMappa"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    
    // Definisco la variabilie mappa come un oggetto OpenLayers.Map utilizzando il DivMappa, poi aggiungo il Layer OSM (Open Street Map)
    var Mappa = new OpenLayers.Map("DivMappa");
    Mappa.addLayer(new OpenLayers.Layer.OSM());
    
    // Creo l'oggetto contenente le coordinate (prima longitudine e poi latitudine)
    var LonLat = new OpenLayers.LonLat( 12.492347,  41.890183 ) 
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // Transformazione da WGS 1984..
            Mappa.getProjectionObject() // .. a Spherical Mercator Projection
          );
          
    // Imposto lo zoom
    var zoom=16; 

    // Creo una variabile contenete il layer dei marker poi collego il layer dei markers alla mappa
    var LayerMarkers = new OpenLayers.Layer.Markers( "Markers" );
    Mappa.addLayer(LayerMarkers);
    
    // Aggiungo al layer dei marker un marker (utilizzando l'oggetto lonLat per le coordinate)
    LayerMarkers.addMarker(new OpenLayers.Marker(LonLat)); 
    
    // Imposto le coordinate di lonLat come centro della mappa di partenza
    Mappa.setCenter (LonLat, zoom); 
  </script>
</body></html>

Questo esempio usa lo stesso oggetto "LonLat" sia per posizionare il marker che per riferimento come centro della mappa. Puoi aggiungere ulteriori markers utilizzando il metodo markers.addMarker(new OpenLayers.Marker(NuovoLonLat)); se definisci "NuovoLonLat" come nuovo oggetto "OpenLayers.LonLat"

Approccio iFrame

C'è anche un segmento HTML ulteriolmente semplice da aggiungere al tuo sito, usando un tag <iframe>. Puoi facilmente ottenere l'HTML necessario usando il tab Export, e scegliendo l'opzione "embeddable HTML". L'approccio iFrame è comunque piuttosto limitato. Se sei interessato nel proseguire la programmazione aggiungendo ulteriori funzioni tramite Javascript il codice di sopra è un punto di partenza migliore.

Esempio OpenLayers con marker e popup

Questo è un esempio OpenLayers con marker e popup. Questo può essere il tipico esempio "Puoi trovarci qui..."

http://dev.openlayers.org/examples/osm-marker-popup.html

Vedi anche