OpenStreetMap: embedding mappa in pagina web (come Google Maps)

Question

C'è un modo per incorporare / mashup OpenStreetMap nella tua pagina (come il modo in API di Google Maps lavori)?

ho bisogno di mostrare una mappa dentro la mia pagina con alcuni marcatori e permettere il trascinamento / zoom in giro, forse di routing. Ho il sospetto che ci sarebbe qualche API Javascript per questo, ma io non riesco a trovarlo.

La ricerca mi fa un API per l'accesso alla mappa dati grezzi , ma che sembra essere più per la mappa editing; inoltre, lavorando con che sarebbe un compito pesante per AJAX.

Answer 1

È necessario utilizzare un po 'di roba JavaScript per mostrare la vostra mappa. OpenLayers è la scelta numero uno per questo.

C'è un esempio a http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example e qualcosa di più avanzato a

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

e

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

Answer 2

C'è ora anche Volantino , che è costruito con i dispositivi mobili in mente.

C'è un Guida rapida per foglio. Oltre a caratteristiche di base, come marcatori, con i plugin supporta anche di routing utilizzando un servizio esterno.

Per una semplice mappa, è IMHO più facile e veloce da configurare rispetto OpenLayers, ancora completamente configurabile e tweakable per gli usi più complessi.

Answer 3

Semplice OSM Slippy Map Demo / Esempio

Fare clic su "Esegui frammento di codice" per vedere una mappa slippy OpenStreetMap embedded con un pennarello su di esso. Questo è stato creato con opuscolo .

Codice

// 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>

Tutte le specifiche

• Utilizza OpenStreetMaps.
• Centri mappa per il GPS di destinazione.
• pone un segnalino sul GPS di destinazione.

Nota:

Ho usato la versione CDN di Volantino qui, ma puoi scaricare i file in modo da poter servire e includerli dal tuo host.

Answer 4

Date un'occhiata a mapstraction . Questo può dare una maggiore flessibilità per fornire mappe basate su google, OSM, yahoo, etc ma il codice non dovrà cambiare.

Answer 5

Vorrei anche dare un'occhiata a strumenti per gli sviluppatori di CloudMade . Offrono un servizio dal design elegante mappa di base OSM, un plugin OpenLayers, e anche il loro leggero, molto veloce JavaScript client mappatura. Inoltre organizzano il proprio servizio di routing, che lei ha citato come possibile requisito. Hanno grande documentazione ed esempi.

Answer 6

È possibile utilizzare OpenLayers (JS API per le mappe).

C'è un esempio sulla loro pagina che mostra come incorporare OSM piastrelle.

Answer 7

Se si desidera solo per incorporare una mappa OSM su una pagina web, il modo più semplice è quello di ottenere il codice iframe direttamente dal sito OSM:

1. Accedere alla mappa che si desidera sul https://www.openstreetmap.org
2. Sul lato destro, fare clic sull'icona "Share", quindi fare clic su "HTML"
3. Copia il codice iframe risultante direttamente nella tua pagina web. Esso dovrebbe essere simile a questo:

<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>

Se si vuole fare qualcosa di più elaborato, vedere OSM wiki " Distribuzione la propria Slippy Map ".

Answer 8

Non c'è modo semplice per farlo se si teme Javascript ... sto ancora imparando. Open Street rende un semplice plugin per WordPress è possibile personalizzare. Aggiungere OSM Widget plugin.

Questo sarà un riempitivo fino a quando ho dato il mio concotion Python Java utilizzando i file di linea coverter TIGER dal Census Bureau.