javascript - library - openlayers

Openstreetmap: mapa de incrustación en la página web(como Google Maps)

Question

¿Hay alguna forma de insertar / mashup el OpenStreetMap en su página (como la forma en que funciona la API de Google Maps )?

Necesito mostrar un mapa dentro de mi página con algunos marcadores y permitir el arrastre / acercamiento, tal vez el enrutamiento. Sospecho que habría alguna API de Javascript para esto, pero parece que no puedo encontrarlo.

Al buscar, obtengo una API para acceder a los datos del mapa en bruto , pero eso parece ser más para la edición del mapa; además, trabajar con eso sería una tarea difícil para AJAX.

Answer 1

Ejemplo de Leaflet simple

Especificaciones

• Utiliza OpenStreetMaps.
• Centra el mapa en el GPS objetivo.
• Coloca un marcador en el GPS objetivo.

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

Nota:

Usé la versión CDN de Leaflet aquí, pero puedes download los archivos para que puedas servirlos e incluirlos desde tu propio host.

Answer 2

Ahora también hay Leaflet , que está construido con dispositivos móviles en mente.

Hay una Guía de inicio rápido para el folleto. Además de funciones básicas como marcadores, con complementos, también admite el routing mediante un servicio externo.

Para un mapa simple, es IMHO más fácil y más rápido de configurar que OpenLayers, pero totalmente configurable y modificable para usos más complejos.

Answer 3

Echa un vistazo a mapstraction . Esto puede darle más flexibilidad para proporcionar mapas basados ​​en google, osm, yahoo, etc. sin embargo, su código no tendrá que cambiar.

Answer 4

Necesita usar algunas cosas de JavaScript para mostrar su mapa. OpenLayers es la opció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

Answer 5

Puede usar OpenLayers (js API para mapas).

Hay un example en su página que muestra cómo incrustar los mosaicos de OSM.

Answer 6

También echaré un vistazo a las herramientas de desarrollo de CloudMade . Ofrecen un servicio de mapa base OSM bellamente diseñado, un plugin OpenLayers e incluso su propio cliente de mapeo de JavaScript ligero y muy rápido. También alojan su propio servicio de enrutamiento, que usted mencionó como un posible requisito. Tienen una gran documentación y ejemplos.