반응형
2. 코드 2
오픈 API를 이용한 법정동 코드 조회(2) - JavaScript(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(16);
vmap.on("click", function(evt) {
if(pop == null){
pop = new vw.ol3.popup.Popup();
}
let coordinate = evt.coordinate //좌표정보(EPSG:900913)
//let latlng_4326 = ol.proj.transform(coordinate, 'EPSG:900913', 'EPSG:4326');
//let latlng_4326_str=latlng_4326[0] + "," + latlng_4326[1];
let latlng_900913_str=coordinate[0] + "," + coordinate[1];
//vmap.getView().setCenter([coordinate[0], coordinate[1]]);
$.ajax({
url: "https://api.vworld.kr/req/address?",
type: "GET",
dataType: "jsonp",
data: {
service: "address",
request: "getaddress",
version: "2.0",
crs: "EPSG:3857",
type: "BOTH",
point: latlng_900913_str,
format: "json",
errorformat: "json",
key: "CEB52025-E065-364C-9DBA-44880E3B02B8"
},
success: function (result) {
console.log(result);
// 좌표 변환
content = "<b>좌표: </b>" + ol.coordinate.toStringHDMS(ol.proj.transform([coordinate[0], coordinate[1]],"EPSG:3857","EPSG:4326")) + "<br>";
pop.title = "<b>좌표 및 주소</b><br><br>";
if (result.response.result.length == 1) {
content += "<br><b>지번 주소: </b>" + result.response.result[0].text;
}
else {
content += "<div><br><b>지번 주소: </b>" + result.response.result[0].text + '<br><br><b>도로명 주소: </b>' + result.response.result[1].text;
}
vmap.addOverlay(pop);
pop.show(content, coordinate);
const match = result.response.result[0].text.match(/^(.*[동|리])\s*(.*)$/);
dong = match[0];
console.log('0:' + match[1] + ',1:' + match[1] + ',2:' + match[2]);
get_legal_code(dong);
},
error: function (xhr, status, error) {
console.error("Error:", status, error);
}
});
});
function get_legal_code(dong) {
xhr=new XMLHttpRequest();
const HttpUrl = "https://apis.data.go.kr/1741000/StanReginCd/getStanReginCdList";
let parameter = "?" + encodeURIComponent("ServiceKey") + "=" + "인증키";
parameter += "&" + "type" + "=" + "json";
parameter += "&" + "locatadd_nm" + "=" + dong;
const searchUrl = HttpUrl + parameter;
xhr.open("GET", searchUrl);
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
const obj = JSON.parse(this.responseText);
console.log(obj);
const regionCd = obj.StanReginCd[1].row[0].region_cd;
alert(dong + "의 법정동 코드는 " + regionCd);
}
};
xhr.send();
}
</script>
</script>
</body>
</html>
가. function으로 변경
송파동에 대한 법정동 코드를 구하는 코드를
function get_legal_code(dong) {
안에 넣고, dong을 인수로 전달합니다.
나. 지번 주소에서 법정동 추출
const match = result.response.result[0].text.match(/^(.*[동|리])\s*(.*)$/);
=> 정규 표현식을 이용해 '동' 또는 '리'로 끝나는 위치를 기준으로 주소를 배열로 나누는 것입니다.
만약 '동' 또는 '리'로 끝나지 않는다면 에러가 발생하고 법정동 코드를 표시하지 못할 것입니다.
dong = match[0];
=> 첫 번째와 두 번째 배열이 동 또는 리로 끝나는 문자열이고, 세 번째 배열이 지번입니다.
get_legal_code(dong);
=> 위에서 구한 dong을 get_legal_code 함수로 전달하고 실행합니다.
그러면 해당하는 동에 법정동 코드가 알림 창(alert)에 표시됩니다.
다. 코드 실행
좌표를 클릭하면 해당 주소가 팝업창에 표시되고, 주소에 해당하는 법정동 코드가 알림 창에 표시됩니다.
반응형
'Map(WEB)' 카테고리의 다른 글
| 오픈 API를 이용한 법정동 코드 조회(4) - PHP(1) (0) | 2025.02.27 |
|---|---|
| 오픈 API를 이용한 법정동 코드 조회(2) - JavaScript(1) (0) | 2025.02.25 |
| 오픈 API를 이용한 법정동 코드 조회(1) (0) | 2025.02.24 |
| vworld 지도 만들기(12) - 주소에 대한 좌표 구하기(2) (0) | 2025.02.17 |
| vworld 지도 만들기(11) - 좌표에 대한 주소 검색하기(3) (2) | 2025.02.14 |