wake-up-neo.net

Openstreetmap: Karte in Webseite einbetten (wie Google Maps)

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

Ich muss eine Karte mit einigen Markierungen auf meiner Seite anzeigen und das Ziehen/Herumzoomen erlauben, vielleicht das Routing .. __ Ich vermute, dass es eine Javascript-API dafür geben würde, aber ich kann sie nicht finden.

Durch das Suchen erhält ich eine API für den Zugriff auf unformatierte Kartendaten , aber das scheint mehr für die Kartenbearbeitung zu sein. Außerdem wäre es eine schwere Aufgabe für AJAX, damit zu arbeiten.

66
Piskvor

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

Es gibt ein Beispiel unter http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example und etwas weiter fortgeschrittenes unter

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

und

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

52
lhahne

Es gibt jetzt auch Leaflet , das für mobile Geräte gedacht ist. 

Es gibt eine Kurzanleitung für Faltblatt. Neben grundlegenden Funktionen wie Markern unterstützt es mit Plugins auch Routing Verwendung eines externen Dienstes.

Für eine einfache Karte ist es IMHO einfacher und schneller einzurichten als OpenLayers, jedoch vollständig konfigurierbar und für komplexere Zwecke anpassbar.

23
Piskvor

Einfache OSM Slippy Map Demo/Beispiel

Klicken Sie auf "Code-Snippet ausführen", um eine eingebettete OpenStreetMap-Slippy-Map mit einer Markierung anzuzeigen. Dieses 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>

Specs

  • Verwendet OpenStreetMaps.
  • Zentriert die Karte auf das Ziel-GPS.
  • Platziert eine Markierung auf dem Ziel-GPS.

Hinweis:

Ich habe die CDN-Version von Leaflet hier verwendet, aber Sie können download die Dateien so verwenden, dass Sie sie von Ihrem eigenen Host aus bereitstellen und hinzufügen können.

11
totymedli

Sehen Sie sich mapstraction an. Auf diese Weise können Sie mehr Flexibilität beim Bereitstellen von Karten auf Grundlage von Google, Osm, Yahoo usw. erhalten. Der Code muss jedoch nicht geändert werden.

6
Alan

Ich würde auch einen Blick auf die Entwickler-Tools von CloudMade werfen. Sie bieten einen wunderschön gestalteten OSM-Basiskartendienst, ein OpenLayers-Plugin und sogar einen eigenen, sehr leichten und sehr schnellen JavaScript-Mapping-Client. Sie hosten auch einen eigenen Routing-Service, den Sie als mögliche Anforderung angegeben haben. Sie haben großartige Dokumentation und Beispiele.

5
atogle

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

Auf ihrer Seite gibt es ein Beispiel , das zeigt, wie OSM-Kacheln eingebettet werden.

3
diciu

Wenn Sie nur eine OSM-Karte in eine Webseite einbetten möchten, können Sie den iframe-Code direkt von der OSM-Website abrufen:

  1. Navigieren Sie zu der gewünschten Karte auf https://www.openstreetmap.org
  2. Klicken Sie auf der rechten Seite auf das Symbol "Freigeben" und anschließend 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 ausführlicheres tun möchten, lesen Sie OSM-Wiki " Bereitstellen Ihrer eigenen Slippy Map ".

1
krubo

Es gibt einen einfachen Weg, wenn Sie Angst vor Javascript haben ... Ich lerne immer noch. Open Street macht ein einfaches Wordpress-Plugin, das Sie anpassen können. OSM Widget Plugin hinzufügen.

Dies wird ein Füller sein, bis ich meine Python Java-Konnotation mit Covert-TIGER-Zeilendateien aus dem Census Bureau herausgefunden habe.

0
David Spahn