DE:OpenLayers Marker Example
_-_The_Noun_Project.svg){kind=small}
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).
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