DE:OpenLayers Marker Example

From OpenStreetMap Wiki
Jump to navigation Jump to search

trash bin

Diese Seite wurde zur Löschung oder Ersetzung durch eine Weiterleitung vorgeschlagen. Bitte sieh auf die Diskussionsseite um Näheres zu erfahren.
Grund: Diese Seite enthält ein Beispiel auf Basis des seit Jahren veralteten OpenLayers 2. Es gibt im Netz unzählige weitere Tutorials zu OpenLayers. Noch einfacher ist es, einfach Leaflet zu benutzen. Ich wüsste nicht, weshalb man diese Seite weiterhin erhalten sollte. Deshalb schlage ich ihre Löschung vor. --Nakaner (talk) 09:37, 13 August 2021 (UTC).

broom

Dieser Artikel oder Abschnitt kann veraltete Informationen enthalten: Diese Seite enthält ein Beispiel auf Basis des seit Jahren veralteten OpenLayers 2. Steig am besten auf Leaflet um oder nutze eine aktuelle Version von OpenLayers und ignoriere diese Seite.
Wenn du aktuelle Informationen beitragen kannst, hilf bitte bei der Aktualisierung oder teile diese auf der Diskussionsseite mit. (Discussion)

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