Openstreetmap: osadzanie mapy na stronie internetowej (np. Google Maps)

Czy istnieje sposób na osadzenie / połączenie OpenStreetMap na swojej stronie (na przykład sposób działania interfejsu API Map Google )?

Muszę pokazać mapę na mojej stronie z kilkoma znacznikami i pozwolić na przeciąganie / powiększanie, być może wyznaczanie tras. Podejrzewam, że będzie do tego jakiś Javascript API, ale nie mogę go znaleźć.

Wyszukiwanie daje mi interfejs API umożliwiający dostęp do surowych danych mapy , ale wydaje się, że jest to bardziej przydatne do edycji mapy; poza tym praca z tym byłaby ciężkim zadaniem dla AJAX.

Aby wyświetlić mapę, musisz użyć JavaScript. OpenLayers jest najlepszym wyborem.

Przykład jest pod adresem http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example i coś bardziej zaawansowanego pod adresem

http://wiki.openstreetmap.org/wiki/OpenLayers_Marker

i

http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example

Jest teraz również Ulotka , która została stworzona z myślą o urządzeniach mobilnych.

Istnieje skrócona instrukcja obsługi dla ulotki. Oprócz podstawowych funkcji, takich jak znaczniki, dzięki wtyczkom obsługuje również routing przy użyciu usługi zewnętrznej.

W przypadku prostej mapy konfiguracja IMHO jest łatwiejsza i szybsza niż OpenLayers, ale jest w pełni konfigurowalna i dostosowywana do bardziej złożonych zastosowań.

Prosta wersja demonstracyjna / przykład OSM Slippy Map

Kliknij „Uruchom fragment kodu”, aby zobaczyć osadzoną śliską mapę OpenStreetMap ze znacznikiem. Zostało to stworzone za pomocą Leaflet .

Kod

// 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>

Okular

• Używa OpenStreetMaps.
• Centruje mapę do docelowego GPS.
• Umieszcza znacznik na docelowym GPS.
• Używa tylko Leaflet jako zależności.

Uwaga:

Użyłem tutaj ulotki w wersji CDN , ale możesz pobrać pliki, aby móc je obsługiwać i dołączać z własnego hosta.

Spójrz na mapstraction . Może to zapewnić większą elastyczność w dostarczaniu map opartych na Google, osm, yahoo itp., Jednak Twój kod nie będzie musiał się zmieniać.

Chciałbym również przyjrzeć się narzędziom programistycznym CloudMade . Oferują pięknie stylizowaną podstawową usługę mapową OSM, wtyczkę OpenLayers, a nawet własny lekki, bardzo szybki klient mapowania JavaScript. Posiadają również własną usługę routingu, o której wspomniałeś jako możliwy wymóg. Mają świetną dokumentację i przykłady.

Możesz użyć OpenLayers (js API dla map).

Na ich stronie znajduje się przykład pokazujący, jak osadzać kafelki OSM.

Edycja: nowy link do przykładów OpenLayers

Jeśli chcesz po prostu osadzić mapę OSM na stronie internetowej, najłatwiejszym sposobem jest pobranie kodu iframe bezpośrednio ze strony OSM:

1. Przejdź do wybranej mapy na https://www.openstreetmap.org
2. Kliknij ikonę „Udostępnij” po prawej stronie, a następnie kliknij „HTML”
3. Skopiuj wynikowy kod iframe bezpośrednio na swoją stronę internetową. To powinno wyglądać tak:

<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>

Jeśli chcesz zrobić coś bardziej skomplikowanego, zobacz wiki OSM „ Wdrażanie własnej śliskiej mapy ”.

Jest na to prosty sposób, jeśli boisz się Javascript ... Nadal się uczę. Open Street tworzy prostą wtyczkę Wordpress, którą możesz dostosować. Dodaj wtyczkę OSM Widget.

To będzie wypełnienie, dopóki nie wymyślę mojej konkluzji w języku Python Java, używając plików liniowych Coverter TIGER z biura Census Bureau.