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


99

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

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

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

Ответы:



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. У них также есть собственная служба маршрутизации, о которой вы упомянули как возможное требование. У них есть отличная документация и примеры.


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 только для США.
Писквор покинул здание
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.