Openstreetmap: вбудовування карти у веб-сторінку (наприклад, Карти Google)

Чи є спосіб вбудувати / змішати OpenStreetMap на вашій сторінці (наприклад, як працює API Карт Google )?

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

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

Вам потрібно використовувати деякі матеріали 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

Зараз існує також брошура , яка створена з урахуванням мобільних пристроїв.

Існує Краткий посібник для листівки. Окрім основних функцій, таких як маркери, він також підтримує маршрутизацію за допомогою зовнішньої служби.

Для простої карти встановити IMHO простіше і швидше, ніж OpenLayers, але повністю налаштовується та налаштовується для більш складних застосувань.

Проста демонстрація OSM Slippy Map / Приклад

Клацніть на "Запустити фрагмент коду", щоб побачити вбудовану малу карту 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.
• Листівка використовує лише як залежність.

Примітка:

Я використовував CDN-версію брошури тут, але ви можете завантажити файли, щоб ви могли обслуговувати та включати їх із власного хосту.

Погляньте на mapstraction . Це може надати вам більшу гнучкість у наданні карт на основі google, osm, yahoo тощо, однак ваш код не доведеться змінювати.

Я б також подивився на інструменти розробника CloudMade . Вони пропонують чудово оформлений базовий сервіс OSM, плагін OpenLayers і навіть власний легкий, дуже швидкий клієнт зіставлення JavaScript. Вони також розміщують власну службу маршрутизації, яку ви вказали як можливу вимогу. Вони мають чудову документацію та приклади.

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

На їхній сторінці є приклад, який показує, як вставляти плитки OSM.

Редагувати: Нове посилання на приклади OpenLayers

Якщо ви просто хочете вбудувати карту 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 ".

Існує простий спосіб це зробити, якщо ви боїтесь Javascript ... Я все ще вчусь. Open Street робить простий плагін Wordpress, який ви можете налаштувати. Додати плагін віджета OSM.

Це буде наповнювачем, доки я не з’ясую свою змішану версію Python Java, використовуючи файли рядків TIGER для обкладинки з Бюро перепису населення.