OpenStreetMap: Incorporação mapa na página web (como o Google Maps)

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

Pergunta

Existe uma maneira de incorporar / mashup do OpenStreetMap em sua página (como a maneira Google Maps API obras)?

Eu preciso mostrar um mapa dentro da minha página com alguns marcadores e permitem arrastar / zoom em torno, talvez roteamento. Eu suspeito que haveria alguma API Javascript para isso, mas eu não consigo encontrá-lo.

Searching me recebe um href="http://wiki.openstreetmap.org/wiki/API" rel="noreferrer"> API , mas que parece ser mais para edição de mapa; Além disso, trabalhar com essa seria uma tarefa pesada para AJAX.

Outras dicas

Há agora também Folheto , que é construído com dispositivos móveis em mente.

Há um Guia de Início Rápido para folheto. Além de características básicas, tais como marcadores, com plugins também suporta roteamento usando um serviço externo.

Para um mapa simples, é IMHO mais fácil e rápido de configurar do que OpenLayers, ainda totalmente configurável e tweakable para usos mais complexos.

Simples OSM Slippy Map Demonstração / Exemplo

Clique em "código Run trecho" para ver um mapa OpenStreetMap slippy incorporado com um marcador sobre ele. Este foi criado com Folheto .

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>

Specs

  • Usa OpenStreetMaps.
  • Centros o mapa para o GPS-alvo.
  • Coloca um marcador no GPS alvo.

Nota:

Eu usei a versão CDN de Folheto aqui, mas você pode download os arquivos para que você possa servir e incluí-los de seu próprio host.

Dê uma olhada mapstraction . Isto pode dar-lhe mais flexibilidade para fornecer mapas com base no google, osm, yahoo, etc no entanto o seu código não vai ter que mudar.

Também gostaria de dar uma olhada de CloudMade . Eles oferecem um serviço de mapa base OSM lindamente decorados, um OpenLayers plugin, e até mesmo seu próprio peso-leve, muito rápido cliente mapeamento JavaScript. Eles também hospedar seu próprio serviço de roteamento, que você mencionou como uma possível exigência. Eles têm uma grande documentação e exemplos.

Você pode usar OpenLayers (JS API para mapas).

Há um exemplo em sua página mostrando como OSM incorporar telhas.

Se você quiser apenas para incorporar um mapa OSM em uma página web, a maneira mais fácil é para obter o código iframe diretamente do site do OSM:

  1. Vá para o mapa que você quer em https://www.openstreetmap.org
  2. No lado direito, clique no ícone "Compartilhar" e clique em "HTML"
  3. Copie o código iframe resultando diretamente em sua página. Deve olhar como este: 

<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 você quer fazer algo mais elaborado, consulte OSM wiki " Implantando seu próprio Slippy Map ".

Não há maneira simples de fazê-lo se você tem medo Javascript ... Eu ainda estou aprendendo. Abrir Rua faz uma simples Wordpress plugin que você pode personalizar. Adicionar OSM Widget plugin.

Este será um enchimento até eu descobrir o meu concotion Python Java usando Coverter arquivos linha TIGRE de Census Bureau.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top