DE:OpenLayers Marker Example

From OpenStreetMap Wiki
Jump to: navigation, search
Verfügbare Sprachen — 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 bokmål · 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 · беларуская · български · қазақша · македонски · монгол · русский · тоҷикӣ · українська · Ελληνικά · Հայերեն · ქართული · नेपाली · मराठी · हिन्दी · অসমীয়া · বাংলা · ਪੰਜਾਬੀ · ગુજરાતી · ଓଡ଼ିଆ · தமிழ் · తెలుగు · ಕನ್ನಡ · മലയാളം · සිංහල · ไทย · မြန်မာဘာသာ · ລາວ · ភាសាខ្មែរ · ⵜⴰⵎⴰⵣⵉⵖⵜ · አማርኛ · 한국어 · 日本語 · 中文(简体)‎ · 吴语 · 粵語 · 中文(繁體)‎ · ייִדיש · עברית · اردو · العربية · پښتو · سنڌي · فارسی · ދިވެހިބަސް

Dies ist ein Beispiel, wie man Markierungen zu einer OpenLayers-Karte hinzufügen kann.

Hier ist der Code, der für dieses Beispiel benötigt wird (Kopiere einfach den folgenden Text in einer HTML-Datei und öffne sie im Browser) :

<html><body>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());

    var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // Transformation aus dem Koordinatensystem WGS 1984
            map.getProjectionObject() // in das Koordinatensystem 'Spherical Mercator Projection'
          );
          
    var zoom=16;

    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
    
    markers.addMarker(new OpenLayers.Marker(lonLat));
    
    map.setCenter (lonLat, zoom);
  </script>
</body></html>

Das Beispiel verwendet das gleiche lonLat-Objekt um die Markierung auf der Karte zu platzieren und diese danach auf diesen Punkt zu zentrieren. Du kannst weitere Markierungen hinzufügen, indem du die Methode markers.addMarker(new OpenLayers.Marker(newLonLat)); aufrufst. newLonLat muss dabei vorher als neuer (Markierungs-)Punkt definiert werden.

Verwendung eines iframe

Noch einfacher geht es im HTML, wenn du einen <iframe> auf deiner Seite verwendest. Hierfür musst du die Karteikarte Export auf der Hauptseite auswählen und dort die Option "HTML zum Einbinden" anklicken. Die Verwendung von iframe hat einige Beschränkungen. Wenn du weitergehende Tricks mit JavaScript machen willst, solltest du das o.a. Beispiel abändern und damit die Sachen ausprobieren. Das gewährt dir wesentlich mehr Möglichkeiten.

OpenLayers Beispiel mit Markierungszeichen und Sprechblase

Hier ein OpenLayers-Beispiel mit Diamant-Marker und Sprechblase. Der klassische "wir sind hier" Anwendungsfall...

Dieser Link ist leider tot: http://www.openlayers.org/dev/examples/osm-marker-popup.html

Dieser führt zur genannten Seite: http://dev.openlayers.org/examples/osm-marker-popup.html

Siehe auch