Openstreetmap:incrustar el mapa en la página web (como Google Maps)

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

Pregunta

Es allí una manera de integrar/mashup la OpenStreetMap en su página (como la forma en que El API de Google Maps trabaja)?

Necesito mostrar un mapa dentro de mi página con algunos marcadores y permite arrastrar/zoom alrededor, tal vez de enrutamiento.Sospecho que habrá algún tipo de API de Javascript para esto, pero me parece que no puede encontrar.

La búsqueda me pone un API de acceso a los crudos datos del mapa, pero que parece ser más para el mapa de la edición;además, trabajo con el que iba a ser una tarea pesada para AJAX.

¿Fue útil?

Solución

Es necesario utilizar un poco de materia JavaScript para mostrar el mapa. OpenLayers es la elección número uno para esto.

Hay un ejemplo en http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example y algo más avanzado en

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

y

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

Otros consejos

Ahora hay también Folleto , que se construye con dispositivos móviles en mente.

Hay una Guía de inicio rápido para folleto. Además de las características básicas, tales como marcadores, con plugins también soporta enrutamiento utilizando un servicio externo.

En un mapa sencillo, es mi humilde opinión más fácil y rápido de instalar que OpenLayers, sin embargo, totalmente configurable y modificables para usos más complejos.

Simple OSM Slippy Mapa Demo / Ejemplo

Haga clic en "Ejecutar fragmento de código" para ver un mapa de OpenStreetMap resbaladizo incrustado con un marcador en él. Este fue creado con Folleto .

Código 

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

Especificaciones

  • Utiliza OpenStreetMap.
  • Centros el mapa al GPS objetivo.
  • coloca un marcador en el GPS objetivo.

Nota:

He utilizado la versión de CDN Folleto aquí, pero puede descargar los archivos para que pueda servir e incluirlos en su propia máquina.

Echa un vistazo a mapstraction.Esto le puede dar más flexibilidad para proporcionar mapas basado en google, osm, yahoo, etc sin embargo, el código no tiene que cambiar.

También me gustaría echar un vistazo a herramientas de desarrollo de CloudMade . Ofrecen un servicio muy bien decorada mapa base OSM, un plugin de OpenLayers, e incluso su propio peso ligero, muy rápido mapeo cliente JavaScript. También reciben su propio servicio de enrutamiento, que usted ha mencionado como un posible requisito. Tienen una gran documentación y ejemplos.

Puede utilizar OpenLayers (API JS para los mapas).

Hay un ejemplo en su página que muestra cómo insertar la OSM azulejos.

Si lo que desea es incrustar un mapa OSM en una página web, la manera más fácil es conseguir el código iframe directamente desde el sitio web de OSM:

  1. Vaya al mapa que desee en https://www.openstreetmap.org
  2. En el lado derecho, haga clic en el icono "Compartir", a continuación, haga clic en "HTML"
  3. Copia el código iframe que resulta directamente en su página web. Se debe tener este aspecto: 

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

Si quieres hacer algo más elaborado, véase wiki de OSM " implementación de su propio Slippy Map ".

No hay forma sencilla de hacerlo si tiene miedo de Javascript ... todavía estoy aprendiendo. Abrir la calle hace un Wordpress plugin simple se puede personalizar. Añadir OSM Widget plug-in.

Esta será una de llenado hasta que descubra mi concotion Java Python usando archivos de líneas Coverter TIGRE de la Oficina del Censo.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top