Openstreetmap: встраивание карты в веб-страницу (например, Google Maps)

99

Есть ли способ встроить / смешать OpenStreetMap на вашу страницу (например, как работает Google Maps API )?

Мне нужно показать карту внутри моей страницы с некоторыми маркерами и разрешить перетаскивание / масштабирование, возможно, маршрутизацию. Я подозреваю, что для этого был бы какой-то Javascript API, но я не могу его найти.

Поиск дает мне API для доступа к необработанным данным карты , но, похоже, это больше для редактирования карты; кроме того, работа с этим была бы сложной задачей для AJAX.

javascript api maps openstreetmap Писквор вышел из здания
источник

Ответы:

32

Теперь есть также Leaflet , созданный для мобильных устройств.

Существует краткое руководство для буклета. Помимо основных функций, таких как маркеры, с помощью плагинов он также поддерживает маршрутизацию с использованием внешней службы.

Для простой карты, ИМХО, ее проще и быстрее настроить, чем OpenLayers, но при этом она полностью настраивается и настраивается для более сложных задач.

Писквор
источник
26

Демонстрация / пример простой скользящей карты OSM

Щелкните «Выполнить фрагмент кода», чтобы увидеть встроенную временную карту OpenStreetMap с маркером на ней. Это было создано с помощью Leaflet .

Код

// 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.6.0/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet"/>
<div id="osm-map"></div>
Развернуть фрагмент

Технические характеристики

  • Использует OpenStreetMaps.
  • Центрирует карту по целевому GPS.
  • Помещает маркер на целевой GPS.
  • Использует Leaflet только как зависимость.

Заметка:

Я использовал CDN-версию Leaflet здесь, но вы можете скачать файлы, чтобы вы могли обслуживать и включать их со своего собственного хоста.

Тотимедли
источник
Я использовал ваш код в функции javascript, и он отлично работает. Но снова, запуск этой функции, увеличивает карту osm и уничтожает все. Любое решение?
0x48piraj
2
@ 0x48piraj Создайте jsfiddle, чтобы продемонстрировать проблему, или, что еще лучше: задайте новый вопрос с вашим кодом, который показывает, что не так.
totymedli
Это прекрасно. Большое спасибо! Один вопрос правда: у var target = L.latLng()вас четко определите координаты. Есть ли шанс показать, как реализовать случай, когда координаты нескольких точек хранятся внутри структуры JSON? Благодарность!
Лукас Аймаретто,
1
Это используется только для вида, в котором должен располагаться центр карты. Вы добавляете маркеры с помощью L.marker(target).addTo(map);Just loop вашей структуры и создаете столько L.latLng()s, сколько вам нужно, и передаете их L.marker().
totymedli
6

Взгляните на mapstraction . Это может дать вам больше гибкости при предоставлении карт на основе google, osm, yahoo и т. Д., Однако ваш код не придется менять.

Алан
источник
их веб-сайт, похоже, не работает.
maddrag0n 09
1
Он работает, но только без поддомена www: mapstraction.com .. именно то, что я искал, спасибо за это!
Дэвид
mapstraction не поддерживается уже почти 10 лет :)
Джулиан Ф. Вайнерт
5

Я также хотел бы взглянуть на инструменты разработчика CloudMade . Они предлагают красиво оформленный базовый картографический сервис OSM, плагин OpenLayers и даже собственный легкий и очень быстрый клиент сопоставления JavaScript. У них также есть собственная служба маршрутизации, о которой вы упомянули как возможное требование. У них есть отличная документация и примеры.

atogle
источник
4

Вы можете использовать OpenLayers (js API для карт).

На их странице есть пример, показывающий, как встраивать плитки OSM.

Изменить: новая ссылка на примеры OpenLayers

Дичиу
источник
Это то, что я искал, большое спасибо. Я могу принять только один ответ, поэтому я перехожу к более подробному.
Писквор покинул здание
3
Ссылка мертвая.
totymedli
2

Если вы просто хотите встроить карту OSM на веб-страницу, самый простой способ - получить код iframe прямо с веб-сайта OSM:

  1. Перейдите к нужной карте на https://www.openstreetmap.org
  2. Справа нажмите значок «Поделиться», затем нажмите «HTML».
  3. Скопируйте полученный код iframe прямо на свою веб-страницу. Должно получиться так:

<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>
Развернуть фрагмент

Если вы хотите сделать что-то более сложное, см. Вики OSM « Развертывание собственной Slippy Map ».

крубо
источник
0

Есть простой способ сделать это, если вы боитесь Javascript ... Я все еще учусь. Open Street создает простой плагин для Wordpress, который вы можете настроить. Добавьте плагин OSM Widget.

Это будет наполнитель, пока я не разберусь со своим сочинением Python Java, используя строковые файлы Coverter TIGER из Бюро переписи населения.

Дэвид Спан
источник
Меня гораздо больше беспокоит Wordpress, чем JS, но это вопрос личного мнения. Спасибо :)
Писквор покинул здание
Btw TIGER только для США.
Писквор покинул здание