Openstreetmap: Einbetten der Karte in eine Webseite (wie Google Maps)

95

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

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

Durch die Suche bekomme ich eine API für den Zugriff auf rohe Kartendaten , aber das scheint eher für die Kartenbearbeitung zu sein. Außerdem wäre es für AJAX eine schwere Aufgabe, damit zu arbeiten.

javascript api maps openstreetmap Piskvor verließ das Gebäude
quelle

Antworten:

32

Es gibt jetzt auch eine Broschüre , die speziell für mobile Geräte entwickelt wurde.

Es gibt eine Kurzanleitung für die Broschüre. Neben grundlegenden Funktionen wie Markern unterstützt es mit Plugins auch das Routing über einen externen Dienst.

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

Piskvor
quelle
25

Einfache OSM Slippy Map Demo / Beispiel

Klicken Sie auf "Code-Snippet ausführen", um eine eingebettete OpenStreetMap-Slippy-Map mit einer Markierung anzuzeigen. Dies wurde mit Leaflet erstellt .

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 leayer 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>
Erweitern Sie das Snippet

Technische Daten

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

Hinweis:

Ich habe hier die CDN-Version von Leaflet verwendet , aber Sie können die Dateien herunterladen, um sie von Ihrem eigenen Host bereitzustellen und einzuschließen.

totymedli
quelle
Ich habe Ihren Code in einer Javascript-Funktion verwendet, und er funktioniert wie ein Zauber. Durch das Auslösen dieser Funktion wird die Osm-Karte vergrößert und alles zerstört. Irgendeine Lösung ?
0x48piraj
2
@ 0x48piraj Bitte erstellen Sie eine jsfiddle , um das Problem zu demonstrieren, oder noch besser: Stellen Sie mit Ihrem Code eine neue Frage, die zeigt, was falsch ist.
Totymedli
Das ist schön. Vielen Dank! Eine Frage: Bei var target = L.latLng()Ihnen definieren Sie die Koordinaten klar. 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 sind? Vielen Dank!
Lucas Aimaretto
1
Dies wird nur für die Ansicht verwendet, in der sich das Zentrum der Karte befinden soll. Sie fügen die Markierungen mit L.marker(target).addTo(map);Just loop Ihre Struktur hinzu und erstellen so viele L.latLng()s, wie Sie benötigen, und übergeben diese an L.marker().
Totymedli
6

Schauen Sie sich Mapstraction an . Dies kann Ihnen mehr Flexibilität bei der Bereitstellung von Karten geben, die auf Google, Osm, Yahoo usw. basieren. Ihr Code muss sich jedoch nicht ändern.

Alan
quelle
Ihre Website scheint ausgefallen zu sein.
maddrag0n
1
Es funktioniert, aber nur ohne die Subdomain "www": mapstraction.com .. genau das, wonach ich gesucht habe, danke dafür!
David
mapstraction wird seit fast 10 Jahren nicht mehr aufrechterhalten :)
Julian F. Weinert
5

Ich würde mir auch die Entwicklertools von CloudMade ansehen . 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-Service, den Sie als mögliche Anforderung genannt haben. Sie haben eine großartige Dokumentation und Beispiele.

atogle
quelle
4

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

Auf ihrer Seite finden Sie ein Beispiel für das Einbetten von OSM-Kacheln.

Bearbeiten: Neuer Link zu OpenLayers-Beispielen

diciu
quelle
Das habe ich gesucht, vielen Dank. Ich kann jedoch nur eine Antwort akzeptieren, daher geht es um die detailliertere.
Piskvor verließ das Gebäude
3
Der Link ist tot.
Totymedli
2

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

  1. Navigieren Sie unter https://www.openstreetmap.org zu der gewünschten Karte
  2. Klicken Sie auf der rechten Seite auf das Symbol "Teilen" und dann auf "HTML".
  3. Kopieren Sie den resultierenden Iframe-Code direkt auf 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>
Erweitern Sie das Snippet

Wenn Sie etwas ausführlicheres tun möchten, lesen Sie das OSM-Wiki " Bereitstellen Ihrer eigenen Slippy Map ".

krubo
quelle
0

Es gibt einen einfachen Weg, dies zu tun, wenn Sie Javascript fürchten ... Ich lerne noch. Open Street erstellt ein einfaches Wordpress-Plugin, das Sie anpassen können. Fügen Sie das OSM-Widget-Plugin hinzu.

Dies wird ein Füllstoff sein, bis ich meine Python-Java-Konkotion mithilfe von TIGER-Zeilendateien des Census Bureau herausgefunden habe.

David Spahn
quelle
Ich mache mir viel mehr Sorgen um Wordpress als um JS, aber das ist Ansichtssache. Vielen Dank :)
Piskvor verließ das Gebäude
Btw TIGER ist nur in den USA erhältlich.
Piskvor verließ das Gebäude