나의 전자지도 제작 방법
DH 교육용 위키
목차
나의 전자지도 예시
나의 전자지도 제작 방법
- 전자지도 상에 표시할 관심 지점(Point of Interst, POI)을 정한다.
- 관심 지점의 경위도 좌표를 구한다.
- 구글 맵 상에 찾고자 하는 지점을 검색
- '구글 맵'에 표시된 관심 지점 위에서 마우스 오른쪽 버튼 클릭한 후, "이곳이 궁금한가요?"를 선택
- '구글 맵'이 알려주는 경도, 위도 값을 복사
- 나의 위키 문서에 다음과 같이 CODING
googlemap 요소의 Attributes
- width .... 지도 표시 창의 넓이: 절대값 또는 상대값으로 표시 (400. 600, 100%, 90%)
- height .... 지도 표시 창의 높이: 절대값으로 표시
- lat .... latitude, 표시할 지도 중심부의 위도
- lon .... longitude, 표시할 지도 중심부의 경도
- type .... 표시할 지도의 초기 형태: normal, satellite, hybrid
- zoom .... 축척 0~19
- icon .... 관심 지점 표시에 쓸 아이콘 이미지 URL
googlemap 요소의 Data Value
36.56591, 127.517885, [[청주 이항희 가옥]] -------- ---------- -------------------- 위도 경도 POI 이름 및 링크
가장 간단한 형태 구글 맵 사용 예시
스크립트
<googlemap width="600" height="300" lat="36.56591" lon="127.517885" type="normal" zoom="15" icon="http://maps.google.com/mapfiles/marker.png"> 36.56591, 127.517885, [[청주 이항희 가옥]] </googlemap>
표시
응용
Path
<googlemap lat="42.711618" lon="-73.205112" zoom="5"> 3#000000 42.711618, -73.25112, 1 43.224024, -70.28301, 2 45.214425, -72.48114, 3 </googlemap>
- Path에 해당되는 좌표값을 입력하고, 첫줄에 Path 속성 설정하기
- 3#000000
- 3: Path 굵기
- #000000: Path 색상 코드
- 3#000000
Areas
<googlemap lat="42.711618" lon="-73.205112" zoom="5"> 3#000000 (#80FFFFFF) 42.711618, -73.25112, 1 43.224024, -70.28301, 2 45.214425, -72.48114, 3 42.711618, -73.25112, 4 </googlemap>
- Areas에 해당되는 좌표값을 입력하고, 첫줄에 Areas 속성 설정하기
- Areas 속성
- 3#000000
- 3: Path 굵기
- #000000: Path 색상 코드
- #80FFFFFF
- 80: 투명도. 투명도 값: 00 ~ FF
- #FFFFFF: Areas 색상
- 3#000000
Marker 설정하기
<googlemap lat="42.711618" lon="-73.205112" zoom="5" icons="http://digerati.aks.ac.kr/DhLab/2017/111/Tutorials/marker{label}.png"> (C) 45.688323,-74.465706, 4 6#000000 (B) 42.711618, -73.25112, 1 (B) 43.224024, -70.28301, 2 (B) 45.214425, -72.48114, 3 </googlemap>
KML 파일 불러오기
<googlemap lat="36.216770" lon="127.613973" type="hybrid" zoom="8"> http://digerati.aks.ac.kr/DhLab/2017/111/Tutorials/E001.kml </googlemap>
※ KML File Source 보기: E001.kml
KML로 내보내기
<googlemapkml article="나의 전자지도 제작 방법">View in Google Earth</googlemapkml>