"전자지도만들기"의 두 판 사이의 차이

phj
이동: 둘러보기, 검색
 
1번째 줄: 1번째 줄:
 
본 위키 페이지는 한국학대학원 인문정보학과 DH위키페이지의 나의 전자지도 만들기를 참고하여 만들었습니다.  
 
본 위키 페이지는 한국학대학원 인문정보학과 DH위키페이지의 나의 전자지도 만들기를 참고하여 만들었습니다.  
 
+
<nowiki><googlemap></nowiki>
 
*http://dh.aks.ac.kr/Edu/wiki/index.php/수원의_모습
 
*http://dh.aks.ac.kr/Edu/wiki/index.php/수원의_모습
 
*http://dh.aks.ac.kr/Edu/wiki/index.php/나의_전자지도_제작_방법
 
*http://dh.aks.ac.kr/Edu/wiki/index.php/나의_전자지도_제작_방법

2021년 1월 18일 (월) 21:13 기준 최신판

본 위키 페이지는 한국학대학원 인문정보학과 DH위키페이지의 나의 전자지도 만들기를 참고하여 만들었습니다. <googlemap>

나의 전자지도 예시

랜드마크가 되는 곳

월드컵경기장, 경기아트센터, 아주대학교병원, 경희대학교, 경기대학교, 성균관대학교

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


나의 전자지도 제작 방법

  1. 전자지도 상에 표시할 관심 지점(Point of Interst, POI)을 정한다.
  2. 관심 지점의 경위도 좌표를 구한다.
    1. 구글 맵 상에 찾고자 하는 지점을 검색
    2. '구글 맵'에 표시된 관심 지점 위에서 마우스 오른쪽 버튼 클릭한 후, "이곳이 궁금한가요?"를 선택
    3. '구글 맵'이 알려주는 경도, 위도 값을 복사
  3. 나의 위키 문서에 다음과 같이 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