어제에 이어 네이버 API 를 따 와 블로그 검색을 하는 기능을 만든다.
SearchAPI.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 제이쿼리 -->
<script>
$(function() {
$("#searchBtn").click(function() {
$.ajax({
url : "../NaverSearchAPI.do",
type : "get",
data : {
keyword : $("#keyword").val(),
startNum : $("#startNum option:selected").val()
},
dataType : "json",
success : sucFuncJson,
error : errFunc
});
});
});
// 성공 (success 처리를 외부로 빼는 방법)
function sucFuncJson(d) {
// 제이슨 형식으로 결과를 받아온다
// 어떤 식으로, 어떤 속성을 포함해서 값을 넘겨주는지 알아오기 위해 콘솔 로그 찍어보기
console.log(d);
let str = "";
$.each(d.items, function(index, item) {
str += "<ul>";
str += " <li>" + (index + 1) + "</li>";
str += " <li>" + item.title +"</li>";
str += " <li>" + item.description +"</li>";
str += " <li>" + item.bloggername +"</li>";
str += " <li>" + item.bloggerlink +"</li>";
str += " <li><a href ='" + item.link + "'>" + item.link + "</a></li>";
str += " <li>" + item.postdata +"</li>";
str += "</ul>";
});
$("#searchResult").html(str);
}
// 실패
function errFunc(e) {
alert("실패 : " + e.status);
}
</script>
<style>
ul {
border: 2px solid #cccccc
}
</style>
</head>
<body>
<div>
<form id="searchFrm">
<select id="startNum">
<option value="1">1페이지</option>
<option value="11">2페이지</option>
<option value="21">3페이지</option>
<option value="31">4페이지</option>
<option value="41">5페이지</option>
</select>
<input type="text" id="keyword" placeholder="검색어를 입력하세요">
<button type="button" id="searchBtn">검색 요청</button>
</form>
</div>
<div id="searchResult">
여기에 검색 결과가 출력됩니다.
</div>
</body>
</html>
SearchAPI.java (내가 쓴 이상하게 동작되는 코드 - 비교를 위해 남겨 놓음)
int startNum = 0;
String text = null;
try {
startNum = Integer.parseInt(req.getParameter("startNum"));
String searchText = req.getParameter("keyword");
text = URLEncoder.encode("searchText", "UTF-8");
System.out.println(searchText);
} catch (UnsupportedEncodingException e) {
throw new RuntimeException("검색어 인코딩 실패",e);
}
String apiURL = "https://openapi.naver.com/v1/search/blog?query=" + text
+ "&display=10&start=" + startNum; // JSON 결과
Map<String, String> requestHeaders = new HashMap<>();
requestHeaders.put("X-Naver-Client-Id", clientId);
requestHeaders.put("X-Naver-Client-Secret", clientSecret);
String responseBody = get(apiURL,requestHeaders);
System.out.println(responseBody);
resp.setContentType("text/html; charset=utf-8");
resp.getWriter().write(responseBody);
}
private static String get(String apiUrl, Map<String, String> requestHeaders){
HttpURLConnection con = connect(apiUrl);
try {
con.setRequestMethod("GET");
for(Map.Entry<String, String> header :requestHeaders.entrySet()) {
con.setRequestProperty(header.getKey(), header.getValue());
}
int responseCode = con.getResponseCode();
if (responseCode == HttpURLConnection.HTTP_OK) { // 정상 호출
return readBody(con.getInputStream());
} else { // 오류 발생
return readBody(con.getErrorStream());
}
} catch (IOException e) {
throw new RuntimeException("API 요청과 응답 실패", e);
} finally {
con.disconnect();
}
}
private static HttpURLConnection connect(String apiUrl){
try {
URL url = new URL(apiUrl);
return (HttpURLConnection)url.openConnection();
} catch (MalformedURLException e) {
throw new RuntimeException("API URL이 잘못되었습니다. : " + apiUrl, e);
} catch (IOException e) {
throw new RuntimeException("연결이 실패했습니다. : " + apiUrl, e);
}
}
private static String readBody(InputStream body){
InputStreamReader streamReader = new InputStreamReader(body);
try (BufferedReader lineReader = new BufferedReader(streamReader)) {
StringBuilder responseBody = new StringBuilder();
String line;
while ((line = lineReader.readLine()) != null) {
responseBody.append(line);
}
return responseBody.toString();
} catch (IOException e) {
throw new RuntimeException("API 응답을 읽는 데 실패했습니다.", e);
}
}
}
오픈 API 활용
1. 공공데이터포탈 사이트 접속
2. 로그인 후 원하는 데이터 찾아 오픈 API 탭에서 데이터 활용 요청
3. 마이페이지에서 신청한 데이터 인증키 설정하기
4. 일반 인증키 (Decoding) 을 긁어와 ApikeyAuth2에 넣고 설정을 누르면 인증키가 발급된다.
5. API 목록에서 두번째 탭에서 openAPI 활용을 누르면 데이터 목록이 제이슨형식으로 목록이 나온다.
우리는 거기서 Request URL을 사용한다. 인증키까지 포함되어 있는 주소다.
그 주소를 그대로 옮겨 인터넷 창에 치면
데이터를 받을 수 있다.
좀 더 정리 된 모습으로 보기위해 구글스토어에서 json viewer를 다운 받아 보았다.
미션) 약국 정보를 네이버 블로그 검색했던 것처럼 화면에 목록을 만들어 뿌려보기
검색은 안되는데 나중에 구현이 될까 싶어 일단 창을 저렇게 두었다.
지금은 검색 요청 버튼을 누르면 그냥 광진구 약국 목록이 뜬다.
OpenView.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 제이쿼리 -->
<script>
$(function() {
$("#searchBtn").click(function() {
$.ajax({
url : "https://api.odcloud.kr/api/15052413/v1/uddi:4f0d5c8a-5b2b-4097-b420-d845315aa993?page=1&perPage=10&serviceKey=SLdtAgHWosK5tvRVL%2Bw87WA8CQz%2FvJIV8hmrV5Yocqqqwu21Ft5IhVLQX1aF6iY5k2pj3Xf%2BztwhMAedzEeF1A%3D%3D",
type : "get",
data : {
keyword : $("#keyword").val(),
startNum : $("#startNum option:selected").val()
},
dataType : "json",
success : sucFuncJson,
error : errFunc
});
});
});
// 성공 (success 처리를 외부로 빼는 방법)
function sucFuncJson(d) {
// 제이슨 형식으로 결과를 받아온다
// 어떤 식으로, 어떤 속성을 포함해서 값을 넘겨주는지 알아오기 위해 콘솔 로그 찍어보기
console.log(d);
let str = "";
$.each(d.data, function(index, item) {
str += "<ul>";
// str += " <li>" + (index + 1) + "</li>";
str += " <li>" + item.순번 +"</li>";
str += " <li>" + item.약국명칭 +"</li>";
str += " <li>" + item['약국소재지(도로명)'] +"</li>";
str += " <li>" + item['약국우편번호(도로명)']+"</li>";
str += "</ul>";
});
$("#searchResult").html(str);
}
// 실패
function errFunc(e) {
alert("실패 : " + e.status);
}
</script>
<style>
ul {
border: 2px solid #cccccc
}
</style>
</head>
<body>
<div>
<form id="searchFrm">
<select id="startNum">
<option value="1">1페이지</option>
<option value="11">2페이지</option>
<option value="21">3페이지</option>
<option value="31">4페이지</option>
<option value="41">5페이지</option>
</select>
<input type="text" id="keyword" placeholder="검색어를 입력하세요">
<button type="button" id="searchBtn">검색 요청</button>
</form>
</div>
<div id="searchResult">
여기에 검색 결과가 출력됩니다.
</div>
</body>
</html>처음에는 제이슨 형식을 작성할때 자바스크립트로 써줘야 한다는 것을 잊고
str += " <li>" + item['약국소재지(도로명)'] +"</li>";
str += " <li>" + item['약국우편번호(도로명)']+"</li>";부분을 그냥
str += " <li>" + item약국소재지_도로명 +"</li>";
str += " <li>" + item약국우편번호_도로명)+"</li>";이렇게 썼는데 값을 못읽어왔다.
아무래도 이상한 것 같아 다시 찾아오니 위 처럼 쓰는 것이 맞았고 그래야 값도 null 이 아니게 잘 나온다.
다 하고 보니 강사님은 약국전화번호까지 나온 데이터를 가지고 와 있었다.
전화번호를 넣기 위해 코드를 다시 수정했다.
수정 후 화면)
OpenView.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 제이쿼리 -->
<script>
$(function() {
$("#searchBtn").click(function() {
$.ajax({
url : "https://api.odcloud.kr/api/15052413/v1/uddi:816ab9e3-dafe-4701-839b-c0c4d53adffe_201902261655?page=1&perPage=10&serviceKey=SLdtAgHWosK5tvRVL%2Bw87WA8CQz%2FvJIV8hmrV5Yocqqqwu21Ft5IhVLQX1aF6iY5k2pj3Xf%2BztwhMAedzEeF1A%3D%3D",
type : "get",
data : {
keyword : $("#keyword").val(),
startNum : $("#startNum option:selected").val()
},
dataType : "json",
success : sucFuncJson,
error : errFunc
});
});
});
// 성공 (success 처리를 외부로 빼는 방법)
function sucFuncJson(d) {
// 제이슨 형식으로 결과를 받아온다
// 어떤 식으로, 어떤 속성을 포함해서 값을 넘겨주는지 알아오기 위해 콘솔 로그 찍어보기
console.log(d);
let str = "";
$.each(d.data, function(index, item) {
str += "<ul>";
// str += " <li>" + (index + 1) + "</li>";
str += " <li>순번: " + item.순번 + "</li>";
str += " <li>약국명칭: " + item.약국명칭 + "</li>";
str += " <li>약국소재지: " + item['약국소재지(도로명)'] + "</li>";
str += " <li>약국우편번호: " + item.약국우편번호 + "</li>";
str += " <li>약국전화번호: " + item.약국전화번호 + "</li>";
str += "</ul>";
});
$("#searchResult").html(str);
}
// 실패
function errFunc(e) {
alert("실패 : " + e.status);
}
</script>
<style>
ul {
border: 2px solid #cccccc
}
</style>
</head>
<body>
<div>
<form id="searchFrm">
<select id="startNum">
<option value="1">1페이지</option>
<option value="11">2페이지</option>
<option value="21">3페이지</option>
<option value="31">4페이지</option>
<option value="41">5페이지</option>
</select>
<input type="text" id="keyword" placeholder="검색어를 입력하세요">
<button type="button" id="searchBtn">검색 요청</button>
</form>
</div>
<div id="searchResult">
여기에 검색 결과가 출력됩니다.
</div>
</body>
</html>
str += " <li>약국소재지: " + item['약국소재지(도로명)'] + "</li>";
str += " <li>약국우편번호: " + item.약국우편번호 + "</li>";
- 여기서는 약국우편번호가 이렇게 해야 읽혔다.. 뭐지
아하 헷갈린 이유가 아까 api에서는 우편번호(도로명) 이렇게 되어있었고 지금 수정한 api는 그냥 우편번호 라고만 적혀있었는데 내가 그걸 잘 보지 않고 혼자 헤맨 것!
제발 정신을 차리고 변수명을 좀 잘 보자!!!!!
- 이와 같은 차이는 JSON 데이터의 키 이름이 일반적인 변수명 규칙을 따르는지 여부에 따라 다릅니다.
1. 일반적인 변수명 규칙을 따르는 경우: 키 이름이 공백, 특수문자 등을 포함하지 않으면 점 표기법을 사용할 수 있습니다.
str += " <li>순번: " + item.순번 + "</li>";
str += " <li>약국명칭: " + item.약국명칭 + "</li>";
str += " <li>약국전화번호: " + item.약국전화번호 + "</li>";2. 일반적인 변수명 규칙을 따르지 않는 경우: 키 이름에 공백, 특수문자, 괄호 등이 포함되면 대괄호 표기법을 사용해야 합니다.
str += " <li>약국소재지: " + item['약국소재지(도로명)'] + "</li>";
str += " <li>약국우편번호: " + item['약국우편번호'] + "</li>";따라서 약국소재지(도로명)과 같은 키는 대괄호 표기법을 사용해야 하고, 순번, 약국명칭, 약국전화번호와 같은 키는 점 표기법을 사용할 수 있습니다.
전체 코드를 일관되게 작성한 예시는 다음과 같습니다:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>약국 정보 검색</title>
<script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js>"></script>
<!-- 제이쿼리 -->
<script>
$(function() {
$("#searchBtn").click(function() {
$.ajax({
url: "<https://api.odcloud.kr/api/15052413/v1/uddi:816ab9e3-dafe-4701-839b-c0c4d53adffe_201902261655?page=1&perPage=10&serviceKey=SLdtAgHWosK5tvRVL%2Bw87WA8CQz%2FvJIV8hmrV5Yocqqqwu21Ft5IhVLQX1aF6iY5k2pj3Xf%2BztwhMAedzEeF1A%3D%3D>",
type: "get",
data: {
keyword: $("#keyword").val(),
startNum: $("#startNum option:selected").val()
},
dataType: "json",
success: sucFuncJson,
error: errFunc
});
});
});
// 성공 (success 처리를 외부로 빼는 방법)
function sucFuncJson(d) {
// JSON 형식으로 결과를 받아온다
console.log(d);
let str = "";
$.each(d.data, function(index, item) {
str += "<ul>";
str += " <li>순번: " + item.순번 + "</li>";
str += " <li>약국명칭: " + item.약국명칭 + "</li>";
str += " <li>약국소재지: " + item['약국소재지(도로명)'] + "</li>";
str += " <li>약국우편번호: " + item['약국우편번호'].replace("'", "") + "</li>";
str += " <li>약국전화번호: " + item.약국전화번호 + "</li>";
str += "</ul>";
});
$("#searchResult").html(str);
}
// 실패
function errFunc(e) {
alert("실패 : " + e.status);
}
</script>
<style>
ul {
border: 2px solid #cccccc;
list-style-type: none;
padding: 10px;
margin: 5px;
}
li {
margin: 5px 0;
}
</style>
</head>
<body>
<div>
<form id="searchFrm">
<select id="startNum">
<option value="1">1페이지</option>
<option value="11">2페이지</option>
<option value="21">3페이지</option>
<option value="31">4페이지</option>
<option value="41">5페이지</option>
</select>
<input type="text" id="keyword" placeholder="검색어를 입력하세요">
<button type="button" id="searchBtn">검색 요청</button>
</form>
</div>
<div id="searchResult">
여기에 검색 결과가 출력됩니다.
</div>
</body>
</html>
다르게 푸는 방법
pharmacy.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>약국 정보 검색</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 제이쿼리 -->
<script>
$(function() {
var url = "https://api.odcloud.kr/api/15052413/v1/uddi:816ab9e3-dafe-4701-839b-c0c4d53adffe_201902261655?page=1&perPage=10&serviceKey=SLdtAgHWosK5tvRVL%2Bw87WA8CQz%2FvJIV8hmrV5Yocqqqwu21Ft5IhVLQX1aF6iY5k2pj3Xf%2BztwhMAedzEeF1A%3D%3D";
$.getJSON(url, function(result) {
var data = result.data;
var table = $("<table />").addClass("pharmacy-table");
var header = $("<tr />").append(
$("<th />").text("순번"),
$("<th />").text("약국명칭"),
$("<th />").text("약국소재지"),
$("<th />").text("약국우편번호"),
$("<th />").text("약국전화번호")
);
table.append(header);
$.each(data, function(i, d) {
var row = $("<tr />").append(
$("<td />").text(d["순번"]),
$("<td />").text(d["약국명칭"]),
$("<td />").text(d["약국소재지(도로명)"]),
$("<td />").text(d["약국우편번호"].replace("'", "")),
$("<td />").text(d["약국전화번호"])
);
table.append(row);
});
$("#searchResult").html(table);
});
});
</script>
<style>
.pharmacy-table {
width: 100%;
border-collapse: collapse;
}
.pharmacy-table th, .pharmacy-table td {
border: 1px solid #cccccc;
padding: 8px;
text-align: left;
}
.pharmacy-table th {
background-color: #f2f2f2;
}
.pharmacy-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.pharmacy-table tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<div id="searchResult">
<!-- 검색 결과가 여기에 표시됩니다. -->
</div>
</body>
</html>
이건 gpt가 만들어준 정리된 화면이다. 정말 핸섬..
MapAPI
이제 이 정보를 지도로 가지고 오기.
카카오 개발자센터에서
내 어플리케이션 만들기 하고
플랫폼에 내 로컬호스트 등록하기. (중요)
그 다음 mapapi로 들어가 마음에 드는 지도를 고르고 지도의 코드를 복붙만 하면 된다.
코드를 복붙하고 발급 받은 key를 넣어 실행하면 내 로컬호스트 주소로도 지도가 뜨는 것을 확인할 수 있다.
마커 생성하기
KakaoMap.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>마커 생성하기</title>
</head>
<body>
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=436ce201a79136708b878547edc3bc6c"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.55408884685698, 126.93578377600151), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(37.55408884685698, 126.93578377600151);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
// marker.setMap(null);
</script>
</body>
</html>
주소로 장소 표시하기
KakaoMap2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>주소로 장소 표시하기</title>
</head>
<body>
<p style="margin-top:-12px">
<em class="link">
<a href="javascript:void(0);" onclick="window.open('http://fiy.daum.net/fiy/map/CsGeneral.daum', '_blank', 'width=981, height=650')">
혹시 주소 결과가 잘못 나오는 경우에는 여기에 제보해주세요.
</a>
</em>
</p>
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=436ce201a79136708b878547edc3bc6c&libraries=services"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.55408884685698, 126.93578377600151), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch('서울 마포구 서강로 136 아이비타워', function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">코리아it아카데미</div>'
});
infowindow.open(map, marker);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
});
</script>
</body>
</html>
광진구 약국 정보를 지도에 마커로 표시하기
PharmarcyMap.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>주소로 장소 표시하기</title>
<style>
table,th,tr,td {
border:2px solid #cccccc
}
</style>
</head>
<body>
<p style="margin-top:-12px">
<em class="link">
<a href="javascript:void(0);" onclick="window.open('http://fiy.daum.net/fiy/map/CsGeneral.daum', '_blank', 'width=981, height=650')">
혹시 주소 결과가 잘못 나오는 경우에는 여기에 제보해주세요.
</a>
</em>
</p>
<div id="map" style="width:100%;height:350px;"></div>
<h1> ※ 광진구 약국 정보 </h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <!-- 제이쿼리 -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=436ce201a79136708b878547edc3bc6c&libraries=services"></script>
<script>
// 약국정보 테이블 표시 start
var url = "https://api.odcloud.kr/api/15052413/v1/uddi:816ab9e3-dafe-4701-839b-c0c4d53adffe_201902261655?page=1&perPage=10&serviceKey=SLdtAgHWosK5tvRVL%2Bw87WA8CQz%2FvJIV8hmrV5Yocqqqwu21Ft5IhVLQX1aF6iY5k2pj3Xf%2BztwhMAedzEeF1A%3D%3D";
$.getJSON(url, function(result) { // getJSON 시작
var data = result.data;
console.log(data);
var tb = $("<table />")
$(tb).append("<th>순번</th><th>약국명칭</th><th>약국소재지(도로명)</th><th>약국우편번호</th><th>약국전화번호</th>");
$.each(data, function(i, d) {
var row = $("<tr />").append(
$("<td />").text(d["순번"]),
$("<td />").text(d["약국명칭"]),
$("<td />").text(d["약국소재지(도로명)"]),
$("<td />").text(d["약국우편번호"]),
$("<td />").text(d["약국전화번호"])
);
tb.append(row);
});
$("body").append(tb);
// 기존 라이브러 코드 start
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 7 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
$.each(data, function(i, d) {
geocoder.addressSearch(d["약국소재지(도로명)"], function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">' + d["약국명칭"] + '</div>'
});
infowindow.open(map, marker);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
});
// 기존 라이브러 코드 end
});
}); // getJSON 끝
// 약국정보 테이블 표시 end
</script>
</body>
</html>
약국의 로드뷰 읽어오기
PharmarcyMap2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>주소로 장소 표시하기</title>
<style>
table, th, tr, td {
border: 2px solid #cccccc;
padding: 5px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
td {
cursor: pointer;
}
.address:hover {
color : skyblue;
}
</style>
</head>
<body>
<p style="margin-top:-12px">
<em class="link">
<a href="javascript:void(0);" onclick="window.open('http://fiy.daum.net/fiy/map/CsGeneral.daum', '_blank', 'width=981, height=650')">
혹시 주소 결과가 잘못 나오는 경우에는 여기에 제보해주세요.
</a>
</em>
</p>
<div id="map" style="width:100%;height:350px;"></div> <!-- 지도표시영역 -->
<div id="roadview" style="width:100%;height:300px;"></div> <!-- 로드뷰를 표시할 div 입니다 -->
<h1> ※ 광진구 약국 정보 </h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <!-- 제이쿼리 -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=436ce201a79136708b878547edc3bc6c&libraries=services"></script>
<script>
// 약국정보 테이블 표시 start
var url = "https://api.odcloud.kr/api/15052413/v1/uddi:816ab9e3-dafe-4701-839b-c0c4d53adffe_201902261655?page=1&perPage=10&serviceKey=SLdtAgHWosK5tvRVL%2Bw87WA8CQz%2FvJIV8hmrV5Yocqqqwu21Ft5IhVLQX1aF6iY5k2pj3Xf%2BztwhMAedzEeF1A%3D%3D";
$.getJSON(url, function(result) { // getJSON 시작
var data = result.data;
console.log(data);
var tb = $("<table />")
$(tb).append("<th>순번</th><th>약국명칭</th><th>약국소재지(도로명)</th><th>약국우편번호</th><th>약국전화번호</th>");
$.each(data, function(i, d) {
var row = $("<tr />").append(
$("<td />").text(d["순번"]),
$("<td />").text(d["약국명칭"]),
$("<td class='address' />").text(d["약국소재지(도로명)"]).data("address", d["약국소재지(도로명)"]),
$("<td />").text(d["약국우편번호"]),
$("<td />").text(d["약국전화번호"])
);
tb.append(row);
});
$("body").append(tb);
// 기존 라이브러 코드 start
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 7 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
$.each(data, function(i, d) {
geocoder.addressSearch(d["약국소재지(도로명)"], function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">' + d["약국명칭"] + '</div>'
});
infowindow.open(map, marker);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
});
// 기존 라이브러 코드 end
});
// 주소 클릭 시 로드뷰 표시
$(document).on("click", ".address", function() {
var address = $(this).data("address");
geocoder.addressSearch(address, function(result, status) {
if (status === kakao.maps.services.Status.OK) {
var position = new kakao.maps.LatLng(result[0].y, result[0].x);
var roadviewContainer = document.getElementById('roadview'); //로드뷰를 표시할 div
var roadview = new kakao.maps.Roadview(roadviewContainer); //로드뷰 객체
var roadviewClient = new kakao.maps.RoadviewClient(); //좌표로부터 로드뷰 파노ID를 가져올 로드뷰 helper객체
// 특정 위치의 좌표와 가까운 로드뷰의 panoId를 추출하여 로드뷰를 띄운다.
roadviewClient.getNearestPanoId(position, 50, function(panoId) {
roadview.setPanoId(panoId, position); //panoId와 중심좌표를 통해 로드뷰 실행
$("#roadview").show();
});
}
});
});
}); // getJSON 끝
// 약국정보 테이블 표시 end
</script>
</body>
PharmacyRodeViewMap3.jsp ( 로드뷰만 나온 ver.)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>로드뷰 생성하기</title>
</head>
<style>
table, th, tr, td {
border: 2px solid #cccccc;
padding: 5px;
text-align: left;
}
.address:hover {
color: skyblue;
}
</style>
<body>
<!-- 로드뷰를 표시할 div 입니다 -->
<div id="roadview" style="width: 100%; height: 300px;"></div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <!-- 제이쿼리 -->
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=436ce201a79136708b878547edc3bc6c&libraries=services"></script>
<script>
var roadviewContainer = document.getElementById('roadview'); //로드뷰를 표시할 div
var roadview = new kakao.maps.Roadview(roadviewContainer); //로드뷰 객체
var roadviewClient = new kakao.maps.RoadviewClient(); //좌표로부터 로드뷰 파노ID를 가져올 로드뷰 helper객체
var position = new kakao.maps.LatLng(33.450701, 126.570667);
// 특정 위치의 좌표와 가까운 로드뷰의 panoId를 추출하여 로드뷰를 띄운다.
roadviewClient.getNearestPanoId(position, 50, function(panoId) {
roadview.setPanoId(panoId, position); //panoId와 중심좌표를 통해 로드뷰 실행
});
</script>
<script>
$(function(){
var url = "https://api.odcloud.kr/api/15052413/v1/uddi:816ab9e3-dafe-4701-839b-c0c4d53adffe_201902261655?page=1&perPage=10&serviceKey=SLdtAgHWosK5tvRVL%2Bw87WA8CQz%2FvJIV8hmrV5Yocqqqwu21Ft5IhVLQX1aF6iY5k2pj3Xf%2BztwhMAedzEeF1A%3D%3D";
$.getJSON(url, function(result) { // getJSON 시작
var data = result.data;
console.log(data);
var tb = $("<table />")
$(tb).append("<th>순번</th><th>약국명칭</th><th>약국소재지(도로명)</th><th>약국우편번호</th><th>약국전화번호</th>");
$.each(data, function(i, d) {
var row = $("<tr />").append(
$("<td />").text(d["순번"]),
$("<td />").text(d["약국명칭"]),
$("<td class='address' />").text(d["약국소재지(도로명)"]),
$("<td />").text(d["약국우편번호"]),
$("<td />").text(d["약국전화번호"])
);
tb.append(row);
});
$("body").append(tb);
$(".address").on("click",function(){
var pharmAddress = $(this).text();
console.log(pharmAddress);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
geocoder.addressSearch(pharmAddress, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var position = new kakao.maps.LatLng(result[0].y, result[0].x);
// 특정 위치의 좌표와 가까운 로드뷰의 panoId를 추출하여 로드뷰를 띄운다.
roadviewClient.getNearestPanoId(position, 50, function(panoId) {
roadview.setPanoId(panoId, position); //panoId와 중심좌표를 통해 로드뷰 실행
});
}
});
});
});
});
</script>
</body>
</html>
'2024_UIUX 국비 TIL' 카테고리의 다른 글
| UIUX _국비과정 0712 [모델2방식으로 페이스북 로그인 프로세스 구현] (0) | 2024.07.29 |
|---|---|
| UIUX _국비과정 0711 [페이스북 로그인] (0) | 2024.07.29 |
| UIUX _국비과정 0709 [AJAX 통신] (1) | 2024.07.23 |
| UIUX _국비과정 0708 [이메일 보내기] (0) | 2024.07.23 |
| UIUX _국비과정 주말공부(0708 모델 2 방식 게시판 수정까지) (2) | 2024.07.22 |