OpenStreetMap : 웹 페이지에 맵 임베딩 (예 : Google지도)

StackOverflow https://stackoverflow.com/questions/925164

문제

페이지에 OpenStreetMap을 포함 시키거나 매시하는 방법이 있습니까? Google 매핑 API 공장)?

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

검색은 나를 얻습니다 원시지도 데이터에 대한 액세스를위한 API, 그러나 그것은지도 편집에 더 많은 것 같습니다. 게다가, 그것과 함께 일하는 것은 Ajax에게 큰 일이 될 것입니다.

도움이 되었습니까?

해결책

지도를 표시하려면 자바 스크립트를 사용해야합니다. 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

다른 팁

지금도 있습니다 전단, 모바일 장치를 염두에두고 구축되었습니다.

이있다 빠른 시작 가이드 전단지 용. 마커와 같은 기본 기능 외에 플러그인이 포함 된 지원도 지원합니다. 라우팅 외부 서비스 사용.

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

간단한 OSM 슬리피 맵 데모/예제

"코드 스 니펫 실행"을 클릭하면 마커가 포함 된 내장 된 OpenStreetMap 슬리피 맵을 볼 수 있습니다. 이것은 함께 만들어졌습니다 전단.

암호

// 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에 마커를 배치합니다.

메모:

나는 CDN 버전을 사용했다 전단 여기, 그러나 당신은 할 수 있습니다 다운로드 파일은 자신의 호스트에서 제공하고 포함시킬 수 있습니다.

보세요 감자. 이를 통해 Google, OSM, Yahoo 등을 기반으로지도를 제공 할 수있는 유연성을 더 많이 제공 할 수 있지만 코드는 변경 될 필요가 없습니다.

나는 또한 살펴볼 것입니다 CloudMade의 개발자 도구. 그들은 아름답게 스타일링 된 OSM 기본지도 서비스, OpenLayers 플러그인, 심지어 가벼운 가벼우면서 매우 빠른 JavaScript 매핑 클라이언트를 제공합니다. 또한 자신의 라우팅 서비스를 주최하며 가능한 요구 사항으로 언급했습니다. 그들은 훌륭한 문서와 사례를 가지고 있습니다.

OpenLayers (맵의 경우 JS API)를 사용할 수 있습니다.

있습니다 예시 OSM 타일을 포함시키는 방법을 보여주는 페이지에.

웹 페이지에 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를 참조하십시오. "자신의 슬리피 맵을 배포합니다".

자바 스크립트를 두려워한다면 간단한 방법이 있습니다 ... 나는 여전히 배우고 있습니다. Open Street는 사용자 정의 할 수있는 간단한 WordPress 플러그인을 만듭니다. OSM 위젯 플러그인을 추가하십시오.

인구 조사국의 Coverter Tiger 라인 파일을 사용하여 파이썬 Java Concotion을 알아낼 때까지 이것은 필러가 될 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top