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

Question 1

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.

Question 2

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

Question 3

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

Question 4

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

Rozwiń fragment

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.

Question 5

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

Question 6

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.

Question 7

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

Question 8

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

Przejdź do wybranej mapy na https://www.openstreetmap.org
Kliknij ikonę „Udostępnij” po prawej stronie, a następnie kliknij „HTML”
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>

Rozwiń fragment

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

Question 9

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.

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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

Rozwiń fragment

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.

Answer 5

Użyłem twojego kodu w funkcji javascript i działa jak urok. Ale znowu, wyzwalając tę funkcję, powiększa mapę osm i niszczy wszystko. Jakieś rozwiązanie?

0x48piraj

Answer 6

2

@ 0x48piraj Utwórz plik jsfiddle, aby zademonstrować problem, a nawet lepiej: zadaj nowe pytanie za pomocą kodu, które pokazuje, co jest nie tak.

totymedli

Answer 7

To jest piękne. Wielkie dzięki! Jedno jednak pytanie: u var target = L.latLng()ciebie jasno określ współrzędne. Czy jest szansa na pokazanie, jak zaimplementować przypadek, w którym współrzędne kilku kropek są przechowywane w strukturze JSON? Dzięki!

Lucas Aimaretto

Answer 8

1

Jest to używane tylko w przypadku widoku, w którym powinien znajdować się środek mapy. Dodajesz markery za pomocą L.marker(target).addTo(map);Just loop your structure i tworzysz tyle znaczników, L.latLng()ile potrzebujesz, i przekazujesz je do L.marker().

totymedli

Answer 9

6

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

Alan
źródło

wydaje się, że ich witryna nie działa.

maddrag0n

1

Działa, ale tylko bez subdomeny „www”: mapstraction.com .. dokładnie to, czego szukałem, dzięki za to!

David

mapstraction nie jest utrzymywane od prawie 10 lat :)

Julian F. Weinert

Answer 10

wydaje się, że ich witryna nie działa.

maddrag0n

Answer 11

1

Działa, ale tylko bez subdomeny „www”: mapstraction.com .. dokładnie to, czego szukałem, dzięki za to!

David

Answer 12

mapstraction nie jest utrzymywane od prawie 10 lat :)

Julian F. Weinert

Answer 13

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.

Answer 14

4

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

diciu
źródło

Właśnie tego szukałem, wielkie dzięki. Mogę jednak przyjąć tylko jedną odpowiedź, więc przechodzę do bardziej szczegółowej.

Piskvor opuścił budynek

3

Link nie działa.

totymedli

Answer 15

Właśnie tego szukałem, wielkie dzięki. Mogę jednak przyjąć tylko jedną odpowiedź, więc przechodzę do bardziej szczegółowej.

Piskvor opuścił budynek

Answer 16

3

Link nie działa.

totymedli

Answer 17

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

Przejdź do wybranej mapy na https://www.openstreetmap.org
Kliknij ikonę „Udostępnij” po prawej stronie, a następnie kliknij „HTML”
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>

Rozwiń fragment

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

Answer 18

0

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.

David Spahn
źródło

Ja o wiele bardziej martwię się Wordpressem niż JS, ale to kwestia opinii. Dziękuję :)

Piskvor opuścił budynek

Btw TIGER jest dostępny tylko w USA.

Piskvor opuścił budynek

Answer 19

Ja o wiele bardziej martwię się Wordpressem niż JS, ale to kwestia opinii. Dziękuję :)

Piskvor opuścił budynek

Answer 20

Btw TIGER jest dostępny tylko w USA.

Piskvor opuścił budynek

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

Odpowiedzi:

Prosta wersja demonstracyjna / przykład OSM Slippy Map

Kod

Okular