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

Question

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

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

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

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

3639 7

javascript api openstreetmap

7 ответов:

Comments

Ничего не найдено.

lhahne · Accepted Answer · 2009-06-05 15:00:08

вы должны использовать некоторые 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

Piskvor · Accepted Answer · 2015-09-13 23:53:25

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

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

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

atogle · Accepted Answer · 2009-06-10 17:02:48

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

Alan · Accepted Answer · 2009-07-06 09:30:35

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

totymedli · Accepted Answer · 2017-01-20 01:25:10

простой листовка пример

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

Использует OpenStreetMaps.

центрирует карту на целевой GPS.

помещает маркер на целевой GPS.

код
// 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/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
<div id="osm-map"></div>
Примечание:

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

diciu · Accepted Answer · 2009-05-29 12:30:29

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

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

David Spahn · Accepted Answer · 2018-09-09 19:21:14

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

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