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

Question 1

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

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

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

Question 2

Чтобы показать карту, вам нужно использовать некоторый JavaScript. OpenLayers - лучший выбор для этого.

Есть пример на http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example и что-то более продвинутое на

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

а также

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

Question 3

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

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

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

Question 4

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

Question 5

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

Question 6

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

Question 7

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

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

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

Question 8

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

Перейдите к нужной карте на https://www.openstreetmap.org
Справа нажмите значок «Поделиться», затем нажмите «HTML».
Скопируйте полученный код 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 ».

Question 9

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

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