Study/Programming

VB 에서 WebBrowser 컨트롤을 통해 HTML 문서 내에 값을 가져오는 방법 (다음 OpenMap 예제 포함)

빨간당무 2009. 11. 5. 00:45

VB에서 WebBrowser 컨트롤을 통해 HTML 문서 내에 특정 Tag의 값을 가져오는 방법임.

우선 VB Form에는 다음과 같은 객체를 추가함.

 객체 명  속성  값
 Form  (이름)  frmMain
 WebBrowser  (이름)  WebBrowser1
 Commandbutton  (이름)  cmdLatLotApp
 TextBox  (이름)  txtLatitude
 TextBox  (이름)  txtLongitude

배치는 무관하며 Form에 위치시키면 됨.




각 컨트롤의 역활은 다음과 같음.
frmMain : 메인 폼, 메인 프로그램 UI가 됨.
WebBrowser1 : HTML 문서를 볼 수 있도록 해주는 웹브라우저 역활을 담당함.
cmdLatLotApp : 버튼을 클릭시에 WebBrowser1에서 위/경도 값을 가져와 txtLatitude와 txtLongitude에 입력함.
txtLatitude : 위도값을 표시할 TextBox
txtLongitude : 경도값을 표시할 TextBox

WebBrowser1 컨트롤로 지도를 보기 위한 HTML 문서임.
Filename : WebMap_dc.html 로 Form과 같은 폴더에 위치 해야 함.
단, 다음 OpenMap을 통해 구현되어 있으므로 OpenMap Key를 할당받아 하단 apikey에 key를 입력해야 진행이 가능함.


위 HTML은 다음 OpenMap을 통해 특정 지도에 ICON를 표시하고 ICON를 Drag하여 좌표를 변경하면 HTML 내에 input (type = hiddem)(lat, lot)에 위/경도 값을 변경한다.

VB에서는 해당 Form에 WebBrowser1를 통해 Map 좌표를 변경하며 cmdLatLotApp 클릭하여 HTML 내의 위/경도 값을 VB Form내의 TextBox로 가져온다.


다른 코드와 섞여 있던걸 해당 루틴만 추출한거라 불필요한 코드가 다수 들어가긴 했지만
WebBrowser1.Document 와 JavaScript의 Document가 동일하다는 것만 알면 JavaScript를 다루어 본 개발자에게는 쉽게 이후 과정이 진행될 것임 (100% 동일하진 않음;;;)

comment :
위 코드는 연구실 프로젝트 중 VB로 UI를 작성하는 부분의 일부이며,
TSP 혹은 VRP와 같은 문제를 해결하기 위한 Depot과 Node의 위치 정보(위경도)를 UI에서 손쉽게 입력하기 위해 작성하였음.
이후 입력된 위경도를 이용하여 Distance Matrix를 구성하여 문제를 해결함.

reference :
다음 DNA 개발자네트워크 - 지도 API
http://dna.daum.net/apis/maps