IT:OpenLayers Marker Example

From OpenStreetMap Wiki
Jump to: navigation, search
Lingue disponibili — OpenLayers Marker Example
Afrikaans Alemannisch aragonés asturianu azərbaycanca Bahasa Indonesia Bahasa Melayu Bân-lâm-gú Basa Jawa Baso Minangkabau bosanski brezhoneg català čeština dansk Deutsch eesti English español Esperanto estremeñu euskara français Frysk Gaeilge Gàidhlig galego Hausa hrvatski Igbo interlingua Interlingue isiXhosa isiZulu íslenska italiano Kiswahili Kreyòl ayisyen kréyòl gwadloupéyen kurdî latviešu Lëtzebuergesch lietuvių magyar Malagasy Malti Nederlands Nedersaksies norsk norsk nynorsk occitan Oromoo oʻzbekcha/ўзбекча Plattdüütsch polski português português do Brasil română shqip slovenčina slovenščina Soomaaliga suomi svenska Tiếng Việt Türkçe Vahcuengh vèneto Wolof Yorùbá Zazaki српски / srpski беларуская български қазақша македонски монгол русский тоҷикӣ українська Ελληνικά Հայերեն ქართული नेपाली मराठी हिन्दी অসমীয়া বাংলা ਪੰਜਾਬੀ ગુજરાતી ଓଡ଼ିଆ தமிழ் తెలుగు ಕನ್ನಡ മലയാളം සිංහල ไทย မြန်မာဘာသာ ລາວ ភាសាខ្មែរ ⵜⴰⵎⴰⵣⵉⵖⵜ አማርኛ 한국어 日本語 中文(简体)‎ 吴语 粵語 中文(繁體)‎ ייִדיש עברית اردو العربية پښتو سنڌي فارسی ދިވެހިބަސް

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