Есть ли способ встраивать /mashup 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
Там теперь также Leaflet, который построен с учетом мобильных устройств.
В лифлете есть Краткое руководство. Помимо основных функций, таких как маркеры, с плагинами, он также поддерживает routing с помощью внешней службы.
Для простого отображения, IMHO проще и быстрее настраивать, чем OpenLayers, но полностью настраиваемый и настраиваемый для более сложных целей.
Нажмите "Выполнить фрагмент кода", чтобы увидеть встроенную карту слипости 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: '© <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>Посмотрите на mapstraction. Это может дать вам больше возможностей для предоставления карт на основе Google, OSM, Yahoo и т.д., Однако ваш код не нужно будет менять.
Я также посмотрю инструменты разработчика CloudMade. Они предлагают красиво оформленную базовую карту OSM, плагин OpenLayers и даже собственный легкий, очень быстрый клиент для сопоставления JavaScript. Они также размещают свою собственную услугу маршрутизации, о которой вы упомянули в качестве возможного требования. У них отличная документация и примеры.
Вы можете использовать OpenLayers (js API для карт).
Там example на странице, где показано, как вставлять плитки OSM.
Если вы просто хотите вставить карту OSM на веб-страницу, самый простой способ - получить код iframe непосредственно с веб-сайта OSM:
<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&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>Есть простой способ сделать это, если вы боитесь Javascript... Я все еще учусь. Open Street делает простой плагин для Wordpress, который вы можете настроить. Добавьте плагин OSM Widget.
Это будет наполнением до тех пор, пока я не выясню мою смесь Python Java с использованием файлов линии TIGER, созданных прикрытием, из Бюро переписей.