반응형
이번에는 HTML과 PHP를 연결해서 클릭한 지점에 대한 주소뿐만 아니라 법정동 코드를 표시해 보겠습니다.
2. 코드 2
가. html 파일
파일명은 search_legal_dong3.html 정도로 하면 됩니다.
<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[1];
//console.log(match[1]);
get_text ='get_legal_dong.php?dong='+dong;
xhr=new XMLHttpRequest();
xhr.open("GET", get_text);
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
disp_text = dong + "의 법정동 코드는 " + this.responseText;
alert(disp_text);
// const obj = JSON.parse(this.responseText);
// console.log(obj);
// const regionCd = obj.StanReginCd[1].row[0].region_cd;
// alert(dong + "의 법정동 코드는 " + regionCd);
}
};
xhr.send();
},
error: function (xhr, status, error) {
console.error("Error:", status, error);
}
});
});
</script>
</script>
</body>
</html>
나. php 파일
파일명은 get_legal_dong.php입니다.
$dong을 get 방식으로 받아서 처리하기 위해 주석 처리했던 부분을 해제하고,
$dong을 직접 입력했던 부분은 주석 처리한 것 말고는 동일합니다.
<?php
include "./wp-admin/config.php";
$dong = isset($_GET['dong']) ? $_GET['dong'] : '';
if (empty($dong)) {
die("URL parameter is missing");
}
// $dong = '서울특별시 영등포구 여의도동';
$HttpUrl = "http://apis.data.go.kr/1741000/StanReginCd/getStanReginCdList";
$parameter = "?" . "ServiceKey" . "=" . $DatagokrKey;
$parameter .= "&" . "type" . "=" . "json";
$parameter .= "&" . "locatadd_nm" . "=" . urlencode($dong);
$searchUrl = $HttpUrl . $parameter;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $searchUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, FALSE);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "GET");
$response = curl_exec($ch);
//echo $response;
curl_close($ch);
// JSON을 PHP 배열로 변환
$data = json_decode($response, true);
// region_cd 값 뽑아내기
$region_cd = $data['StanReginCd'][1]['row'][0]['region_cd'];
// 결과 출력
echo $region_cd;
?>
다. html 파일 설명
(1) XMLHttpRequest()의 open 대상이 달라졌음
| get_text ='get_legal_dong.php?dong='+dong; xhr=new XMLHttpRequest(); xhr.open("GET", get_text); |
JavaScript로 했을 때나 마찬가지로
XMLHttpRequest()를 이용해서 처리하는데,
JavaScript로 처리했을 때는
URL이 const searchUrl = HttpUrl + parameter;로서
html 파일에서 url과 parameter를 다 지정했는데,
이번에는 PHP로 URL과 parameterf를 처리하기 때문에
get_text ='get_legal_dong.php?dong='+dong;로
php 파일명과 dong 변수만 전달합니다.
(2) PHP에서 처리한 결과 처리
| console.log(this.responseText); disp_text = dong + "의 법정동 코드는 " + this.responseText; alert(disp_text); |
console.log로 PHP로 처리한 결과를 확인하고,
알림 창에 표시할 내용을 disp_text에 저장하고 표시합니다.
PHP 파일에서 echo로 처리하면 그것이 this.responseText로 넘어오고,
return으로 처리하면 안 됩니다.
JSON 파일 처리를 PHP에서 했기 때문에 JavaScript로 할 필요가 없습니다.
라. 실행 결과
실행 결과는 JavaScript로 하나 PHP로 하나 동일한데, 자바스크립트 처리 후 미국 서버(cloudaccess.net)에서 PHP로 처리한 결과를 가져오기 때문에 알람창이 좀 늦게 뜹니다.
반응형
'Map(WEB)' 카테고리의 다른 글
| vworld 지도 만들기(14) - 개별공시지가 표시하기(2) : JSONP (0) | 2025.03.04 |
|---|---|
| vworld 지도 만들기(13) - 개별공시지가 표시하기(1) : JavaScript (2) | 2025.03.03 |
| 오픈 API를 이용한 법정동 코드 조회(4) - PHP(1) (0) | 2025.02.27 |
| 오픈 API를 이용한 법정동 코드 조회(3) - JavaScript(2) (0) | 2025.02.26 |
| 오픈 API를 이용한 법정동 코드 조회(2) - JavaScript(1) (0) | 2025.02.25 |