Openstreetmap: Karte in Webseite einbetten (wie Google Maps)

Lesezeit: 5 Minuten

Benutzer-Avatar
Piskvor verließ das Gebäude

Gibt es eine Möglichkeit, die OpenStreetMap in Ihre Seite einzubetten/zu mashupen (wie z Google Maps-API funktioniert)?

Ich muss eine Karte mit einigen Markierungen auf meiner Seite anzeigen und das Ziehen/Zoomen ermöglichen, möglicherweise Routing. Ich vermute, dass es dafür eine Javascript-API geben würde, aber ich kann sie anscheinend nicht finden.

Die Suche bringt mich an API für den Zugriff auf Kartenrohdaten, aber das scheint eher für die Kartenbearbeitung zu sein; Außerdem wäre die Arbeit damit eine schwere Aufgabe für AJAX.

Benutzer-Avatar
lhahne

Sie müssen etwas JavaScript-Zeug verwenden, um Ihre Karte anzuzeigen. OpenLayers ist dafür die erste Wahl.

Ein Beispiel gibt es unter http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example und etwas fortgeschrittener bei

http://wiki.openstreetmap.org/wiki/OpenLayers_Marker

und

http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example

Gibt’s jetzt auch Flugblattdas speziell für mobile Geräte entwickelt wurde.

Da ist ein Schnellstartanleitung für Merkblatt. Neben grundlegenden Funktionen wie Markern werden auch Plugins unterstützt Routing Nutzung eines externen Dienstes.

Für eine einfache Karte ist sie meiner Meinung nach einfacher und schneller einzurichten als OpenLayers, jedoch vollständig konfigurierbar und für komplexere Anwendungen anpassbar.

Benutzer-Avatar
totymedli

Einfache OSM Slippy Map Demo/Beispiel

Klicken Sie auf „Codeausschnitt ausführen“, um eine eingebettete OpenStreetMap-Slippy-Karte mit einer Markierung darauf anzuzeigen. Diese wurde mit erstellt Flugblatt.

Code

// Where you want to render the map.
var element = document.getElementById('osm-map');

// Height has to be set. You can do this in CSS too.
element.style="height:300px;";

// Create Leaflet map on map element.
var map = L.map(element);

// Add OSM tile layer to the Leaflet map.
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Target's GPS coordinates.
var target = L.latLng('47.50737', '19.04611');

// Set map's center to target with zoom 14.
map.setView(target, 14);

// Place a marker on the same location.
L.marker(target).addTo(map);
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
<div id="osm-map"></div>

Spezifikationen

  • Verwendet OpenStreetMaps.
  • Zentriert die Karte auf das Ziel-GPS.
  • Platziert eine Markierung auf dem Ziel-GPS.
  • Verwendet Leaflet nur als Abhängigkeit.

Notiz:

Ich habe die CDN-Version von verwendet Flugblatt hier, aber du kannst Download die Dateien, damit Sie sie von Ihrem eigenen Host aus bereitstellen und einbinden können.

  • Ich habe Ihren Code in einer Javascript-Funktion verwendet, und es funktioniert wie ein Zauber. Aber auch hier vergrößert das Auslösen dieser Funktion die Osm-Karte und zerstört alles. Irgendeine Lösungsmöglichkeit ?

    – 0x48piraj

    26. Dezember 2017 um 5:49 Uhr


  • @0x48piraj Bitte erstellen Sie eine jsfiddle um das Problem zu demonstrieren, oder noch besser: Stellen Sie eine neue Frage mit Ihrem Code, die zeigt, was falsch ist.

    – totymedli

    26. Dezember 2017 um 6:34 Uhr


  • Dies ist schön. Danke vielmals! Eine Frage aber: at var target = L.latLng() Sie definieren die Koordinaten eindeutig. Gibt es eine Möglichkeit zu zeigen, wie der Fall implementiert werden kann, in dem die Koordinaten für mehrere Punkte in einer JSON-Struktur gespeichert werden? Vielen Dank!

    – Lucas Aimaretto

    7. Juli 2020 um 21:03 Uhr

  • Das wird nur für die Ansicht verwendet, wo der Kartenmittelpunkt liegen soll. Sie fügen die Markierungen mit hinzu L.marker(target).addTo(map); Schleifen Sie einfach Ihre Struktur und erstellen Sie so viele L.latLng()s, wie Sie brauchen, und geben Sie diese weiter L.marker().

    – totymedli

    7. Juli 2020 um 22:30 Uhr

  • @LucasAimaretto Hier ist ein Beispiel, in dem ein Array aus drei Markern definiert und durchlaufen wird: harrywood.co.uk/maps/examples/leaflet/marker-array.view.html

    – Harry Holz

    15. November 2021 um 16:21 Uhr

Wenn Sie nur eine OSM-Karte in eine Webseite einbetten möchten, ist es am einfachsten, den Iframe-Code direkt von der OSM-Website zu erhalten:

  1. Navigieren Sie zur gewünschten Karte https://www.openstreetmap.org
  2. Klicken Sie auf der rechten Seite auf das Symbol „Teilen“ und dann auf „HTML“.
  3. Kopieren Sie den resultierenden Iframe-Code direkt in Ihre Webseite. Es sollte so aussehen:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="https://www.openstreetmap.org/export/embed.html?bbox=-62.04673002474011%2C16.95487694424327%2C-61.60521696321666%2C17.196751341562923&amp;layer=mapnik" 
style="border: 1px solid black"></iframe>
<br/><small><a href="https://www.openstreetmap.org/#map=12/17.0759/-61.8260">View Larger Map</a></small>

Wenn Sie etwas Ausgefeilteres tun möchten, lesen Sie das OSM-Wiki “Bereitstellen Ihrer eigenen Slippy Map“.

Benutzer-Avatar
Alan

Schauen Sie sich an Kartenextraktion. Dies kann Ihnen mehr Flexibilität geben, Karten basierend auf Google, OSM, Yahoo usw. bereitzustellen, Ihr Code muss sich jedoch nicht ändern.

  • ihre Website scheint down zu sein.

    – maddrag0n

    9. Juli 2012 um 9:25 Uhr

  • Es funktioniert, aber nur ohne die Subdomain “www”: mapstraction.com ..genau was ich gesucht habe, danke dafür!

    – david

    7. März 2013 um 22:19 Uhr


  • mapstraction wird seit fast 10 Jahren nicht mehr gepflegt 🙂

    – Julian F. Weinert

    24. Januar 2020 um 23:06 Uhr

Benutzer-Avatar
atogle

würde ich mir auch mal anschauen Die Entwicklertools von CloudMade. Sie bieten einen wunderschön gestalteten OSM-Basiskartendienst, ein OpenLayers-Plugin und sogar ihren eigenen leichten, sehr schnellen JavaScript-Mapping-Client. Sie hosten auch ihren eigenen Routing-Dienst, den Sie als mögliche Anforderung erwähnt haben. Sie haben eine großartige Dokumentation und Beispiele.

  • ihre Website scheint down zu sein.

    – maddrag0n

    9. Juli 2012 um 9:25 Uhr

  • Es funktioniert, aber nur ohne die Subdomain “www”: mapstraction.com ..genau was ich gesucht habe, danke dafür!

    – david

    7. März 2013 um 22:19 Uhr


  • mapstraction wird seit fast 10 Jahren nicht mehr gepflegt 🙂

    – Julian F. Weinert

    24. Januar 2020 um 23:06 Uhr

Benutzer-Avatar
ktii

Sie können OpenLayers (js-API für Karten) verwenden.

Dort ist ein Beispiel auf ihrer Seite, die zeigt, wie man OSM-Kacheln einbettet.

Bearbeiten: Neu Link zu OpenLayers-Beispielen

  • Das habe ich gesucht, vielen Dank. Ich kann jedoch nur eine Antwort akzeptieren, also komme ich zur ausführlicheren.

    – Piskvor verließ das Gebäude

    29. Mai 2009 um 10:25 Uhr

  • Der Link ist tot.

    – totymedli

    19. Januar 2017 um 23:26 Uhr

1225430cookie-checkOpenstreetmap: Karte in Webseite einbetten (wie Google Maps)

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy