<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap4.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.0/proj4.min.js"></script>
<script>
var table;
var headerArray1 = ["명칭", "도로명주소", "위도", "경도", "대분류", "중분류", "소분류"];
var headerArray2 = ["우편번호", "도로명주소", "위도", "경도", "지번주소"];
var column1 = [
{
data: 'title',
width: '20%',
render: function(data, type, row) {
if((type === 'display')) {
var showData = (data.length > 10) ? data.substr( 0, 10 ) + '…' : data;
var coord = [parseFloat(row.point.x), parseFloat(row.point.y)];
var convertCoord = proj4('EPSG:4326', 'EPSG:3857').forward(coord);
return '<a href="https://map.naver.com/v5/?c='+convertCoord[0]+','+convertCoord[1]+',18,0,0,2,dh" target="_blank" title="' + data + '">' + showData + '</a>';
}
// return '<a href="https://www.google.co.kr/maps/@' + row.point.y + ',' + row.point.x + ',18z" target="_blank" title="' + data + '">' + showData + '</a>';
}
},
{data: 'address.road'},
{
data: 'point.y',
visible: false,
searchable: false
},
{
data: 'point.x',
visible: false,
searchable: false
},
{
data: 'category',
width: '15%',
render: function(data, type, row) {
var regexp = /\s>\s/;
var match = data.split(regexp);
return match[0];
}
},
{
data: 'category',
width: '15%',
render: function(data, type, row) {
var regexp = /\s>\s/;
var match = data.split(regexp);
return match[1];
}
},
{
data: 'category',
width: '15%',
render: function(data, type, row) {
var regexp = /\s>\s/;
var match = data.split(regexp);
return match[2];
}
}
];
var column2 = [
{data: 'address.zipcode'},
{data: 'address.road'},
{data: 'point.y'},
{data: 'point.x'},
{data: 'address.parcel'}
];
function tableDraw(category) {
$("#resultArea").html("");
var htmlStr = "<table id='datatable' class='table table-striped table-bordered' style='width: 100%;'><thead><tr>";
var targetArray = (category == "place") ? headerArray1 : headerArray2;
for(var i = 0; i < targetArray.length; i++) {
if(category == "place" && (targetArray[i] == "위도" || targetArray[i] == "경도"))
htmlStr += "<th style='display: none;'>" + targetArray[i] + "</th>";
else
htmlStr += "<th>" + targetArray[i] + "</th>";
}
htmlStr += "</tr></thead></table>";
$("#resultArea").html(htmlStr);
}
$(document).ready(function() {
$("input[name='type']").change(function(event) {
var category = $(this).val();
tableDraw(category);
});
tableDraw("place");
});
function handleError(xhr, stat, err) {
var category = $("input[name='type']:checked").val();
alert(stat);
$("#resultArea").empty();
tableDraw(category);
return;
}
function apiSample() {
var searchForm = document.getElementById("searchForm");
var placeSearch = $("#placeSearch").val();
var selectCategory = document.searchForm.type.value;
if(!searchForm.checkValidity()) {
alert("항목 선택 또는 내용 입력이 필요합니다.");
return;
}
table = $("#datatable").dataTable({
serverSide: true,
destroy: true,
autoWidth: true,
searching: false,
responsive: true,
ordering: false,
ajax: function(data, callback, settings) {
var paging = data.start / data.length;
var params = {
request: "search",
crs: "ESPG:4326",
size: data.length,
category: (selectCategory == "place") ? null : "road",
page: paging + 1,
query: placeSearch,
type: selectCategory,
key: "A13BCEDC-4803-33FE-A491-25E5023414E7"
};
return $.ajax({
url: "http://api.vworld.kr/req/search",
data: params,
dataType: "jsonp",
method: "GET",
success: function (json, status, xhr) {
var status = json.response.status;
if(status != "OK") {
handleError(xhr, status, '');
return;
} else {
var result = {
draw: data.draw,
data: json.response.result.items,
recordsTotal: json.response.record.total,
recordsFiltered: json.response.record.total,
error: status
};
callback(result);
}
},
error: handleError
});
},
columns: (selectCategory == "place") ? column1 : column2
});
}
</script>
<body>
<form id="searchForm" name="searchForm" action="#" onkeydown="return event.key != 'Enter';">
<label><input type="radio" name="type" value="place" required /> 장소</label>
<label><input type="radio" name="type" value="address" /> 주소</label>
<input type="text" id="placeSearch" required />
<button type="button" onclick="javascript:apiSample();">검색</button>
</form>
<hr />
<div id="resultArea" style='width: 80%; margin: auto;'></div>
</body>
</html>