Openstreetmap: Einbetten Karte in der Homepage (wie Google Maps)

StackOverflow https://stackoverflow.com/questions/925164

Frage

Gibt es eine Möglichkeit zum Einbetten / Mashup die OpenStreetMap auf Ihrer Seite (wie die Art und Weise Google Maps API Werke)?

Ich brauche eine Karte in meiner Seite mit einigen Markierungen zeigen und erlauben Ziehen / Zoomen um, vielleicht Routing. Ich vermute, es würde einige Javascript-API für diese, aber ich kann nicht scheinen, um es zu finden.

Searching wird mir ein API für den Zugriff auf rohe Kartendaten , aber das scheint mehr zu sein für Karte Bearbeitung; außerdem für AJAX wäre eine schwere Aufgabe mit, dass die Arbeit.

War es hilfreich?

Lösung

Sie müssen einige JavaScript Sachen benutzen, um Ihre Karte zu zeigen. Openlayers ist die erste Wahl für diese.

Es ist ein Beispiel unter http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example und etwas weiter fortgeschritten bei

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

und

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

Andere Tipps

Es gibt jetzt auch Leaflet , die mit mobilen Geräten im Verstand errichtet wird.

Es gibt einen Kurzanleitung für Prospekte . Neben den grundlegenden Funktionen wie Markierungen, mit Plugins unterstützt es auch Routing einen externen Dienst.

Für eine einfache Karte, ist es meiner Meinung nach einfacher und schneller als Openlayers einzurichten, noch voll konfigurierbar und modifizierbar für komplexere Anwendungen.

Einfache OSM Slippy Map Demo / Beispiel

Klicken Sie auf „Run-Code-Snippet“ eine eingebettete OpenStreetMap slippy Karte mit einer Markierung auf, es zu sehen. Dies wurde erstellt mit Leaflet .

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/leaflet@1.0.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" rel="stylesheet"/>
<div id="osm-map"></div>

Specs

  • Verwendet OpenStreetMap.
  • Zentren der Karte zum Ziel GPS.
  • Platziert einen Marker auf dem Ziel-GPS.

Hinweis:

ich verwendet, um die CDN-Version von Leaflet hier, aber Sie können Download die Dateien, so dass Sie dienen können und schließen Sie sie von Ihrem eigenen Host.

Hier finden Sie aktuelle Mapstraction . Dies kann Ihnen mehr Flexibilität, die Karten auf Basis von Google, osm, Yahoo, etc. aber Ihr Code nicht ändern.

Ich würde auch einen Blick auf Cloudmade Developer Tools . Sie bieten einen schön gestalteten OSM Basis-Karten-Service, eine Openlayers-Plugin, und sogar ihre eigenen leichte, sehr schnelles JavaScript-Mapping-Client. Sie haben auch ihre eigenen Routing-Dienst hosten, die Sie als eine mögliche Anforderung genannt. Sie haben eine große Dokumentation und Beispiele.

Sie können Openlayers (js API für Karten) verwendet werden.

Es gibt ein Beispiel auf ihrer Seite zeigt, wie OSM einzubetten Fliesen.

Wenn Sie nur eine OSM Karte auf einer Webseite einbetten möchten, ist der einfachste Weg, um den iframe-Code direkt von der OSM Website zu erhalten:

  1. Navigieren Sie zu der Karte, die Sie wollen auf https://www.openstreetmap.org
  2. Auf der rechten Seite klicken Sie auf den „Share“ Symbol und klicken Sie auf „HTML“
  3. Kopieren Sie die resultierende iframe-Code direkt in Ihre Internetseite. Es sollte wie folgt 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 wollen, etwas zu tun aufwändigere finden OSM Wiki „ Bereitstellen der eigenen Slippy Map “.

Es ist einfach so, wie es zu tun, wenn Sie Javascript fürchten ... Ich lerne immer noch. Open Street macht eine einfache Wordpress-Plugin Sie anpassen können. In OSM Widget Plugin.

Dies wird ein Füllstoff sein, bis ich meinen Python Java concotion mit coverter TIGER Linie Dateien aus dem Census Bureau herauszufinden.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top