이번 글에서는 카카오맵 API를 이용하여 주소 검색 기능을 만들어보겠습니다. 이 기능을 만들기 위해서는 카카오맵 API를 불러와야 하는데, 다음과 같이 script 태그를 이용하여 불러올 수 있습니다.
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은_앱_키&libraries=services"
></script>위 코드에서 appkey 부분에는 본인이 발급받은 앱 키를 입력해야 합니다. libraries=services는 주소 검색 기능을 사용하기 위해 필요한 라이브러리입니다.
이제 HTML 코드를 작성해봅시다.
<body>
<div id="map"></div>
<form id="search-form">
<input type="text" id="address-input" placeholder="주소를 입력하세요" />
<button type="submit">검색</button>
</form>
</body>위 코드에서는 div 태그로 지도를 표시할 영역을 만들고, form 태그로 주소 입력 폼을 만듭니다.
그리고 JavaScript 코드를 작성합니다.
<script>
var map = new kakao.maps.Map(document.getElementById("map"), {
center: new kakao.maps.LatLng(37.54699, 127.09598),
level: 5,
});
var addressInput = document.getElementById("address-input");
var geocoder = new kakao.maps.services.Geocoder();
// 주소 검색 폼 제출 시
document
.getElementById("search-form")
.addEventListener("submit", function (event) {
event.preventDefault();
// 주소로 좌표를 검색합니다
geocoder.addressSearch(addressInput.value, function (result, status) {
if (status === kakao.maps.services.Status.OK) {
// 검색된 좌표를 변수에 저장합니다
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 검색된 좌표를 clipboard에 복사합니다
let dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = coords
.toString()
.replace(/[()]/g, "")
.replace(", ", ",");
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
alert("좌표가 클립보드에 복사되었습니다.");
// 검색된 좌표로 지도 중심을 이동시킵니다
map.setCenter(coords);
} else {
// 검색 실패 시 예시 좌표로 이동합니다
var exampleCoords = new kakao.maps.LatLng(37.54699, 127.09598);
alert(
"검색 실패! 예시 좌표 " +
exampleCoords.toString() +
" 로 이동합니다."
);
map.setCenter(exampleCoords);
}
});
});위 코드에서 "&libraries=services" 부분은 카카오 맵 API에서 제공하는 서비스 라이브러리를 사용하기 위한 설정입니다. 이 설정을 추가하면 Geocoder, Places, Analytics 등과 같은 서비스 라이브러리를 사용할 수 있습니다.
또한, 위 코드에서는 검색된 좌표를 클립보드에 복사하는 기능도 추가되어 있습니다. 이를 위해 별도의 라이브러리를 사용하지 않고, 자바스크립트를 이용하여 구현하였습니다. 하지만, 클립보드에 복사하는 기능을 좀 더 편리하게 구현하려면 Clipboard.js와 같은 클립보드 관련 라이브러리를 사용하는 것이 좋습니다.
따라서, 위 코드에서는 카카오 맵 API에서 제공하는 서비스 라이브러리를 사용하고, 검색된 좌표를 클립보드에 복사하는 기능을 추가하였습니다. 이를 바탕으로 더욱 다양한 기능을 추가하여 다양한 프로젝트를 개발해보시길 바랍니다.
'javascript' 카테고리의 다른 글
| 자바스크립트 메소드 공부(pop) (0) | 2023.04.18 |
|---|---|
| HTML, CSS, JavaScript를 활용한 아코디언 메뉴 구현하기 (0) | 2023.03.29 |
| API와 자바스크립트를 이용해 실시간 날씨 정보 받아오기 (0) | 2023.03.28 |
| 자바스크립트를 사용한 간단한 메뉴 구현하기 (0) | 2023.03.27 |
| 자바스크립트를 이용한 버튼 클릭 시 내용 보이기 (0) | 2023.03.26 |
