지도 이동시에 중심 좌표를 받아오려고 addListener를 추가했는데
"Cannot read property ‘addListener’ of undefined" 이에러가 발생합니다…
appKey부분 삭제한 소스 아래에 첨부합니다.
왜 해당 에러가 발생하는지 모르겠네요…
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="header">
<meta charset="UTF-8">
<!-- <link rel="stylesheet" type="text/css" th:href="@{/css/common.css}" /> -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=&libraries=services,clusterer,drawing"></script>
<title>Insert title here</title>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>
<input type="button" id="refresh" value="이 지역 검색" onclick="refresh()">
<p id="result"></p>
<script>
var map;
var infowindow;
navigator.geolocation.getCurrentPosition(function(position){
var latitud = position.coords.latitude;
var longitude = position.coords.longitude;
//마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
infowindow = new kakao.maps.InfoWindow({zIndex:1});
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(latitud, longitude), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};
map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
// 장소 검색 객체를 생성합니다
var ps = new kakao.maps.services.Places(map);
// 카테고리로 은행을 검색합니다
ps.categorySearch('PM9', placesSearchCB, {useMapBounds:true});
});
// 키워드 검색 완료 시 호출되는 콜백함수 입니다
function placesSearchCB (data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {
for (var i=0; i<data.length; i++) {
displayMarker(data[i]);
}
}
}
// 지도에 마커를 표시하는 함수입니다
function displayMarker(place) {
// 마커를 생성하고 지도에 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(place.y, place.x)
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
// 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>');
infowindow.open(map, marker);
});
}
function refresh(){
alert("click");
}
// 지도가 이동, 확대, 축소로 인해 중심좌표가 변경되면 마지막 파라미터로 넘어온 함수를 호출하도록 이벤트를 등록합니다
kakao.maps.event.addListener(map, 'center_changed', function() {
//alert("1111111");
// 지도의 레벨을 얻어옵니다
var level = map.getLevel();
// 지도의 중심좌표를 얻어옵니다
var latlng = map.getCenter();
var message = '<p>지도 레벨은 ' + level + ' 이고</p>';
message += '<p>중심 좌표는 위도 ' + latlng.getLat() + ', 경도 ' + latlng.getLng() + '입니다</p>';
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = message;
});
</script>
</body>
</html>