<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>주소로 지도 찾기</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
#map {
width:100%;
height: 300px;
}
/* info window */
.outer {
font-size: 20px;
padding: 0.5em;
}
.outer > .inner {
width: 100%;
text-align: center;
}
</style>
<!-- jquery cdn -->
<!-- kakao map cdn -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=앱키를 입력하세요"></script>
<!-- javascript 작성 공간 -->
<script>
$(function(){
//마커와 인포윈도우를 기억해 두기 위한 배열
var memory = {
markerList: [],
infowindowList: []
};
//var container = document.getElementById('map');
//var container = document.querySelector("#map");
var container = $("#map")[0];
var options = {
//지도의 중심 좌표(위도-latitude, 경도-longitude)
center: new kakao.maps.LatLng(37.556370, 126.970139),
//지도의 배율(zoom level : 1부터 14까지)
level: 3
};
//변수로 만들면 범위 제한이 걸린다
//var map = new kakao.maps.Map(container, options);
//범위 제한을 없애고 싶다면 외부에 만들거나 window에 추가한다
window.map = new kakao.maps.Map(container, options);
//이동하는 함수
function move(lat, lng) {
var moveLatLon = new kakao.maps.LatLng(lat, lng);
map.setCenter(moveLatLon);
//map.panTo(moveLatLon);
}
//마커를 표시하는 함수
function createMarker(lat, lng) {
var markerPosition = new kakao.maps.LatLng(lat, lng);
var marker = new kakao.maps.Marker({
position: markerPosition
});
marker.setMap(map);
memory.markerList.push(marker);
}
//마커와 텍스트를 같이 표시하는 함수
function createMarkerText(lat, lng, text) {
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(lat, lng);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
memory.markerList.push(marker);
// 템플릿을 불러와서 글자를 설정한 뒤 인포윈도우로 추가
var template = $("#info-window-template").html();
//template = template.replace("???", "바꿀값");//문자열처럼 처리
var result = $(template).find(".inner")//.inner를 찾아서
.html(text)//글자를 바꾸고
.parents(".outer")//.outer로 돌아와서
//.html();//html 글자를 내놔라~(내부글자)
.prop("outerHTML");//html글자를 내놔라(전체글자)
var iwContent = result;
var iwPosition = new kakao.maps.LatLng(lat, lng); //인포윈도우 표시 위치입니다
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
position : iwPosition,
content : iwContent
});
// 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
infowindow.open(map, marker);
memory.infowindowList.push(infowindow);
}
//지도상의 모든 마커와 인포윈도우를 삭제하는 함수
function clearMarker() {
for(var i=0; i < memory.markerList.length; i++) {
memory.markerList[i].setMap(null);
}
memory.markerList = [];
}
function clearInfowindow() {
for(var i=0; i < memory.infowindowList.length; i++) {
memory.infowindowList[i].close();
}
memory.infowindowList = [];
}
//검색하기 버튼을 누르면 Geocoder를 이용하여 검색한 뒤
//마커생성+인포윈도우에 주소출력+지도이동
$(".btn-search").click(function(){
//초기화(선택)
clearMarker();
clearInfowindow();
// 입력된 주소를 불러옵니다
var address = $(".search-input").val();
if(address.length == 0) return;
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
geocoder.addressSearch(address, function(result, status){
console.log(result);
//정상 검색
if (status === kakao.maps.services.Status.OK) {
//var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
var lat = result[0].y;
var lng = result[0].x;
var text = result[0].address_name;
createMarkerText(lat, lng, text);
move(lat, lng);
}
});
});
});
</script>
<script id="info-window-template" type="text/template">
<div class="outer">
<div class="inner">?</div>
</div>
</script>
</head>
<body>
<div class="container w-500">
<div class="row">
<h1>카카오 지도 다루기</h1>
</div>
<div class="row">
<div id="map"></div>
</div>
<div class="row">
<input type="text" class="search-input form-input w-100" placeholder="주소 입력">
</div>
<div class="row">
<button class="btn btn-positive w-100 btn-search">
<i class="fa-solid fa-magnifying-glass"></i>
검색하기
</button>
</div>
</div>
</body>
</html>
'Javascript' 카테고리의 다른 글
| E-mail 전송(인증번호 보내기) (1) | 2023.11.20 |
|---|---|
| 카카오 지도 다루기 2 (0) | 2023.11.16 |
| 카카오 지도 다루기 (1) | 2023.11.15 |
| Kakao 지도 시작하기 (0) | 2023.11.14 |
| 파일 업로드2 (0) | 2023.11.13 |