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 · Basa Sunda · Baso Minangkabau · bosanski · brezhoneg · català · čeština · corsu · 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 bokmål · norsk nynorsk · occitan · Oromoo · oʻzbekcha/ўзбекча · Plattdüütsch · polski · português · română · shqip · slovenčina · slovenščina · Soomaaliga · suomi · svenska · Tagalog · 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