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

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

명세서

• OpenStreetMaps를 사용합니다.
• 지도를 대상 GPS의 중앙에 위치시킵니다.
• 목표 GPS에 마커를 배치합니다.

Note:

I used the CDN version of Leaflet here, but you can download the files so you can serve and include them from your own host.

---

Take a look at mapstraction. This can give you more flexibility to provide maps based on google, osm, yahoo, etc however your code won't have to change.

---

I would also take a look at CloudMade's developer tools. They offer a beautifully styled OSM base map service, an OpenLayers plugin, and even their own light-weight, very fast JavaScript mapping client. They also host their own routing service, which you mentioned as a possible requirement. They have great documentation and examples.

---

You can use OpenLayers (js API for maps).

There's an example on their page showing how to embed OSM tiles.

---

If you just want to embed an OSM map on a webpage, the easiest way is to get the iframe code directly from the OSM website:

1. Navigate to the map you want on https://www.openstreetmap.org
2. On the right side, click the "Share" icon, then click "HTML"
3. Copy the resulting iframe code directly into your webpage. It should look like this:

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

If you want to do something more elaborate, see OSM wiki "Deploying your own Slippy Map".

---

There is simple way to do it if you fear Javascript...I'm still learning. Open Street makes a simple Wordpress plugin you can customize. Add OSM Widget plugin.

This will be a filler until I figure out my Python Java concotion using coverter TIGER line files from the Census Bureau.

참고URL : https://stackoverflow.com/questions/925164/openstreetmap-embedding-map-in-webpage-like-google-maps