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 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