Openstreetmap : 웹 페이지에지도 삽입 (예 : Google지도)

페이지에 OpenStreetMap을 삽입 / 매시업하는 방법이 있습니까 ( Google Maps API 작동 방식과 같이 )?

마커가있는 내 페이지 내부에지도를 표시하고 드래그 / 확대 / 축소 (라우팅 가능)를 허용해야합니다. 이에 대한 Javascript API가 있다고 생각하지만 찾을 수없는 것 같습니다.

검색하면 원시지도 데이터에 액세스 할 수 있는 API가 제공 되지만지도 편집에는 더 많은 것 같습니다. 게다가, 그것으로 작업하는 것은 AJAX에게 무거운 작업이 될 것입니다.

지도를 표시하려면 자바 스크립트를 사용해야합니다. OpenLayers는이를위한 최고의 선택입니다.

가 AT 예입니다 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 도 있습니다 .

이 빠른 시작 가이드 리플릿을 위해. 마커와 같은 기본 기능 외에도 플러그인 을 통해 외부 서비스를 사용한 라우팅 도 지원합니다 .

간단한 맵의 경우 IMHO는 OpenLayers보다 설정하는 것이 더 쉽고 빠르지 만 더 복잡한 사용을 위해 완전히 구성하고 조정할 수 있습니다.

간단한 OSM 미끄러운지도 데모 / 예제

"코드 스 니펫 실행"을 클릭하면 마커가있는 포함 된 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: '&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>

명세서

• OpenStreetMaps를 사용합니다.
• 지도를 대상 GPS에 중심을 맞 춥니 다.
• 목표 GPS에 마커를 배치합니다.
• Leaflet을 종속성으로 만 사용합니다.

노트 :

여기 에서 CDN 버전의 Leaflet을 사용 했지만 파일을 다운로드 하여 자신의 호스트에서 제공하고 포함 할 수 있습니다.

mapstraction을 살펴 보십시오 . 이렇게하면 google, osm, yahoo 등을 기반으로지도를 제공하는 데 더 많은 유연성을 제공 할 수 있지만 코드를 변경할 필요는 없습니다.

CloudMade의 개발자 도구도 살펴 보겠습니다 . 그들은 아름다운 스타일의 OSM 기본지도 서비스, OpenLayers 플러그인 및 자체 경량의 매우 빠른 JavaScript 매핑 클라이언트를 제공합니다. 또한 가능한 요구 사항으로 언급 한 자체 라우팅 서비스를 호스팅합니다. 그들은 훌륭한 문서와 예제를 가지고 있습니다.

OpenLayers (지도 용 js API)를 사용할 수 있습니다.

있다 예를 어떻게 삽입 OSM 타일로 보여주는 자신의 페이지가.

편집 : OpenLayers 예제에 대한 새 링크

웹 페이지에 OSM지도를 삽입하려는 경우 가장 쉬운 방법은 OSM 웹 사이트에서 직접 iframe 코드를 가져 오는 것입니다.

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 " Deploying your own Slippy Map "을 참조하십시오 .

Javascript가 두렵다면 간단한 방법이 있습니다. 아직 배우는 중입니다. Open Street는 사용자 정의 할 수있는 간단한 Wordpress 플러그인을 만듭니다. OSM 위젯 플러그인을 추가합니다.

인구 조사국의 TIGER 라인 파일을 사용하여 Python Java 조합을 파악할 때까지 필러가 될 것입니다.