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

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

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

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

Ответы

Ответ 2

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

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

Для простого отображения, IMHO проще и быстрее настраивать, чем OpenLayers, но полностью настраиваемый и настраиваемый для более сложных целей.

Ответ 3

Простой 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 GPS coordinates.
var target = L.latLng('47.50737', '19.04611');

// Set map 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/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
<div id="osm-map"></div>

Ответ 4

Посмотрите на mapstraction. Это может дать вам больше возможностей для предоставления карт на основе Google, OSM, Yahoo и т.д., Однако ваш код не нужно будет менять.

Ответ 5

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

Ответ 6

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

Там example на странице, где показано, как вставлять плитки OSM.

Ответ 7

Если вы просто хотите вставить карту 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>

Ответ 8

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

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