전자지도만들기
본 위키 페이지는 한국학대학원 인문정보학과 DH위키페이지의 나의 전자지도 만들기를 참고하여 만들었습니다.
http://dh.aks.ac.kr/Edu/wiki/index.php/수원의_모습 http://dh.aks.ac.kr/Edu/wiki/index.php/나의_전자지도_제작_방법
목차
나의 전자지도 예시
랜드마크가 되는 곳
월드컵경기장, 경기아트센터, 아주대학교병원, 경희대학교, 경기대학교, 성균관대학교
<googlemap width="800" height="400" lat="37.286526" lon="127.036850" type="normal" zoom="12" icon="http://maps.google.com/mapfiles/marker.png">
37.286526, 127.036850, 월드컵경기장
37.261541, 127.037576, 경기아트센터
37.279432, 127.047469 , 아주대학교병원
37.242953, 127.080079 , 경희대학교국제캠퍼스
37.300522, 127.035819, 경기대학교
37.293920, 126.975414, 성균관대학교
37.275098, 127.057536, 중앙기독초등학교
</googlemap>
문화유산이나 관광지
수원화성, 행궁, 지지대고개, 노송지대
<googlemap width="800" height="400" lat="37.299992" lon="127.001014 " type="normal" zoom="12" icon="http://maps.google.com/mapfiles/marker.png">
37.288544, 127.013934, 수원화성
37.281955, 127.013727, 행궁
37.327648, 126.985252, 지지대고개
37.315306, 126.986946, 노송지대
</googlemap>
물건을 사고 파는 곳
영동시장, 지동시장, 광교아비뉴프랑, 앨리웨이
<googlemap width="800" height="400" lat="37.28" lon="127.036" type="normal" zoom="14" icon="http://maps.google.com/mapfiles/marker.png">
37.276949, 127.018659, 영동시장
37.277702, 127.019279, 지동시장
37.290434, 127.050734, 광교아비뉴프랑
37.274510, 127.062504, 앨리웨이
</googlemap>
교통의 중심인 곳
수원역, 광교중앙역, 수원 종합버스터미널, 영통역
<googlemap width="800" height="400" lat="37.28" lon="127.036" type="normal" zoom="12" icon="http://maps.google.com/mapfiles/marker.png">
37.266596, 126.999422, 수원역
37.288432, 127.051658, 광교중앙역
37.250904, 127.019713, 수원버스터미널
37.251535, 127.071326, 영통역
37.245816, 127.057361, 망포역
37.261952, 127.030741, 수원시청역
</googlemap>
사람들의 생활을 편리하게 도와주는 곳
푸른숲 도서관, 경기 도청, 수원 시청, 아주대학교 병원, 수원 우편 집중국
<googlemap width="800" height="400" lat="37.28" lon="127.04" type="normal" zoom="13" icon="http://maps.google.com/mapfiles/marker.png">
37.281202, 127.066608, 푸른숲도서관
37.275052, 127.009445, 경기도청
37.263454, 127.028653, 수원시청
37.279432, 127.047469, 아주대학교병원
37.254249, 127.076186, 수원우편집중국
</googlemap>
나의 전자지도 제작 방법
- 전자지도 상에 표시할 관심 지점(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="12" icon="http://maps.google.com/mapfiles/marker.png"> 36.56591, 127.517885, [[청주 이항희 가옥]] </googlemap>
표시
<googlemap width="600" height="300" lat="36.56591" lon="127.517885" type="normal" zoom="12" icon="http://maps.google.com/mapfiles/marker.png"> 36.56591, 127.517885, 청주 이항희 가옥 </googlemap>
응용
Path: 경로 표시
<googlemap lat="37.38" lon="127.099" zoom="12"> 3#00FFFF 37.393512, 127.053715 37.392142, 127.090316 37.357394, 127.081634 37.386235, 127.135188 </googlemap>
<googlemap lat="37.38" lon="127.099" zoom="12"> 3#00FFFF 37.393512, 127.053715 37.392142, 127.090316 37.357394, 127.081634 37.386235, 127.135188 </googlemap>
- <googlemap> 태그 안의 데이타 영역에서 먼저 선의 굵기 및 색상 값을 입력하고, 그 다음 줄부터 각 지점의 좌표와 이동 순서를 차례로 입력.
- 선의 굵기 및 색상 지정 방법
- 3#000000 .... 3: 선 굵기, ##00FFFF: 선 색상
Areas: 구역 표시
<googlemap lat="37.38" lon="127.099" zoom="12"> 3#00FFFF (#40FFFF00) 37.357394, 127.081634 37.386235, 127.135188 37.393512, 127.053715 </googlemap>
<googlemap lat="37.38" lon="127.099" zoom="12"> 3#00FFFF (#40FFFF00) 37.357394, 127.081634 37.386235, 127.135188 37.393512, 127.053715 </googlemap>
- <googlemap> 태그 안의 데이타 영역에서 먼저 구역(Area) 표시 선의 굵기 및 색상 값을 입력하고, 두번째 줄부터 각 지점의 좌표를 차례로 입력.
- 선의 굵기, 색상, 구역 내부 색상 지정 방법
- 3#00FFFF ..... 3: 선 굵기, #000000: 선 색상
- (#40FFFF00) ..... 40: 투명도(투명도 값: 00 ~ FF), #FFFF00: 구역 내부 색상
Marker 설정하기
<googlemap lat="37.38" lon="127.099" zoom="12" type="normal" icons="http://digerati.aks.ac.kr/VR/style/{label}.png"> 3#007F7F (school) 37.393512, 127.053715 (pavilion_b) 37.392142, 127.090316 (house) 37.357394, 127.081634 (pavilion_r) 37.386235, 127.135188 </googlemap>
<googlemap lat="37.38" lon="127.099" zoom="12" type="normal" icons="http://digerati.aks.ac.kr/VR/style/{label}.png"> 3#007F7F (school) 37.393512, 127.053715 (pavilion_b) 37.392142, 127.090316 (house) 37.357394, 127.081634 (pavilion_r) 37.386235, 127.135188 </googlemap>
http://digerati.aks.ac.kr/VR/style/school.png
http://digerati.aks.ac.kr/VR/style/house.png
http://digerati.aks.ac.kr/VR/style/pavilion_b.png
http://digerati.aks.ac.kr/VR/style/pavilion_r.png