Map(WEB)

vworld 지도 만들기(10) -주소에 대한 좌표 구하기(1)

별동산 2025. 2. 13. 08:19
반응형

지난번에는 클릭한 지점에 대한 좌표값을 구한 다음 주소를 구했는데,
이번에는 반대로 주소를 입력하면 주소에 대한 좌표값을 구하는 것을 해보겠습니다.
 
API는 지난번과 같은 페이지에 있는데, 왼쪽 '주소를 좌표로 변환' 탭의 내용을 참고합니다.

 

1. 예제 코드

자바스크립트 예제 코드가 아래와 같이 작성되어 있습니다.

 
이를 기존 코드에 갖다 붙이면 아래와 같습니다.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, shrink-to-fit=no">
	<title>주소에 대한 좌표 구하기</title>
</head>

<body>

	<div id="vmap">
	<script type="text/javascript" src="https://map.vworld.kr/js/vworldMapInit.js.do?version=2.0&apiKey=CEB52025-E065-364C-9DBA-44880E3B02B8&domain=localhost:8080"></script>

	<script type="text/javascript">
		let pop = null ;
		
		vw.ol3.MapOptions = {
			basemapType: vw.ol3.BasemapType.GRAPHIC
			, controlDensity: vw.ol3.DensityType.EMPTY
			, interactionDensity: vw.ol3.DensityType.BASIC
			, controlsAutoArrange: true
			, homePosition: vw.ol3.CameraPosition
			, initPosition: vw.ol3.CameraPosition
		};

		let vmap = new vw.ol3.Map("vmap",  vw.ol3.MapOptions); 		 

		vmap.getView().setCenter([14129132.729661161, 4512073.703926638]);
		vmap.getView().setZoom(18);

		vmap.on("click", function() {
			$.ajax({
				url: "https://api.vworld.kr/req/address?",
				type: "GET",
				dataType: "jsonp",
				data: {
					service: "address",
					request: "GetCoord",
					version: "2.0",
					crs: "EPSG:4326",
					type: "ROAD",
					address: "서울특별시 강남구 봉은사로 524",
					format: "json",
					errorformat: "json",
					key: "CEB52025-E065-364C-9DBA-44880E3B02B8"
				},
				success: function (result) {
					console.log(result);
				}
			});
		});

	</script>
</body>
</html>

 
 

2. 코드 실행

on_click 메서드이기 때문에 지도가 로딩된 다음 아무 지점이나 클릭하면
(F12키를 눌러서) console 창에서 좌표를 확인할 수 있습니다.

 
잘 안 보여서 해당 부분만 확대하면 아래와 같습니다.

 
point x는 127.057115634, y는 37.512953367입니다.
 

3. popup으로 표시

9편에서 다뤘던 popup을 이용해서 팝업 창으로 좌표를 표시하려면 아래와 같이 코드를 수정하면 됩니다.

		let pop = null ;
		vmap.on("click", function(evt) {
			if(pop == null){
				pop = new vw.ol3.popup.Popup();       
			}		
			let coordinate = evt.coordinate //좌표정보(EPSG:900913)
			const address = "서울특별시 강남구 봉은사로 524";
			
			$.ajax({
				url: "https://api.vworld.kr/req/address?",
				type: "GET",
				dataType: "jsonp",
				data: {
					service: "address",
					request: "GetCoord",
					version: "2.0",
					crs: "EPSG:4326",
					type: "ROAD",
					address: address,
					format: "json",
					errorformat: "json",
					key: "CEB52025-E065-364C-9DBA-44880E3B02B8"
				},
				success: function (result) {
					console.log(result);
					pop.title = "<b>주소에 대한 좌표</b><br><br>";					
					content = address + " 의 좌표는" + result.response.result.point.x + ',' + result.response.result.point.y + " 입니다.";
					vmap.addOverlay(pop);
					pop.show(content, coordinate);						
				}
			});

 

let pop = null ;
vmap.on("click", function(evt) {
    if(pop == null){
        pop = new vw.ol3.popup.Popup();       
    }

 
popup 변수를 선언하고, 비어 있으면 Popup Overlay를 선언합니다.

null을 체크하는 것은 popup이 여러 개 나타나지 않도록 하기 위한 것입니다.
 

let coordinate = evt.coordinate //좌표정보(EPSG:900913)

function함수의 인수로 evt를 넣고, 이를 이용해 coordinate(좌표)를 구합니다.
 

const address = "서울특별시 강남구 봉은사로 524";


data: {
    ....
    address: address,
    ....

그리고, ajax 외부에서 address 값을 참고할 수 있도록 address 변수를 선언한 다음 값을 넣고,
 

content = address + " 의 좌표는" + result.response.result.point.x + ',' + result.response.result.point.y + " 입니다.";

popup창에 표시할 content에 넣고, x와 y좌표 값도 넣습니다.
 

pop.title = "<b>주소에 대한 좌표</b><br><br>";

popup의 title도 설정합니다.
 

vmap.addOverlay(pop);
pop.show(content, coordinate);

그리고, poup창에 표시하면 아래와 같이 됩니다.
 
그러나 지도를 클릭했을 뿐 이동하지 않아 클릭한 지점과는 무관합니다.

 

4. 전체 코드

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, shrink-to-fit=no">
	<title>주소에 대한 좌표 구하기</title>
</head>

<body>

	<div id="vmap">
	<script type="text/javascript" src="https://map.vworld.kr/js/vworldMapInit.js.do?version=2.0&apiKey=CEB52025-E065-364C-9DBA-44880E3B02B8&domain=localhost:8080"></script>

	<script type="text/javascript">
		vw.ol3.MapOptions = {
			basemapType: vw.ol3.BasemapType.GRAPHIC
			, controlDensity: vw.ol3.DensityType.EMPTY
			, interactionDensity: vw.ol3.DensityType.BASIC
			, controlsAutoArrange: true
			, homePosition: vw.ol3.CameraPosition
			, initPosition: vw.ol3.CameraPosition
		};

		let vmap = new vw.ol3.Map("vmap",  vw.ol3.MapOptions); 		 

		vmap.getView().setCenter([14129132.729661161, 4512073.703926638]);
		vmap.getView().setZoom(18);

		let pop = null ;
		vmap.on("click", function(evt) {
			if(pop == null){
				pop = new vw.ol3.popup.Popup();       
			}		
			let coordinate = evt.coordinate //좌표정보(EPSG:900913)
			const address = "서울특별시 강남구 봉은사로 524";
			
			$.ajax({
				url: "https://api.vworld.kr/req/address?",
				type: "GET",
				dataType: "jsonp",
				data: {
					service: "address",
					request: "GetCoord",
					version: "2.0",
					crs: "EPSG:4326",
					type: "ROAD",
					address: address,
					format: "json",
					errorformat: "json",
					key: "CEB52025-E065-364C-9DBA-44880E3B02B8"
				},
				success: function (result) {
					console.log(result);
					pop.title = "<b>주소에 대한 좌표</b><br><br>";					
					content = address + " 의 좌표는" + result.response.result.point.x + ',' + result.response.result.point.y + " 입니다.";
					vmap.addOverlay(pop);
					pop.show(content, coordinate);						
				}
			});
		});

	</script>
</body>
</html>

 
 
다음 편에서는 주소를 입력받아 해당 지점으로 이동한 후 팝업 창을 표시하는 것을 구현해 보겠습니다.

반응형
저작자표시 비영리