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

StackOverflow https://stackoverflow.com/questions/925164

Вопрос

Есть ли способ встроить / мэшап OpenStreetMap на вашу страницу (например, следующим образом API Карт Google работает)?

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

Поиск дает мне возможность 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

Другие советы

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

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

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

Простая Демонстрация карты OSM Slippy Map / Пример

Нажмите на "Запустить фрагмент кода", чтобы увидеть встроенную скользкую карту OpenStreetMap с маркером на ней.Это было создано с помощью Рекламный лист.

Код

// 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.0.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" rel="stylesheet"/>
<div id="osm-map"></div>

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

  • Использует OpenStreetMaps.
  • Центрирует карту по целевому GPS-навигатору.
  • Устанавливает маркер на целевом GPS-навигаторе.

Примечание:

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

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

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

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

Там есть пример на их странице показано, как встраивать OSM-плитки.

Если вы просто хотите встроить карту 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 wiki "Развертывание вашей собственной Скользкой карты".

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top