안녕하세요.
코딩 왕초보라서ㅠㅠ 도저히 모르겠어서 글 남깁니다…
첨부드린 이미지를 보시면, 지도 상단에 검색창이 있고 이 검색창에 지역명(서울, 부산 등등…)을 입력하고 검색 버튼을 누르면 그 지역으로 지도 중심좌표가 움직이게끔 하고, 지도 확대 레벨이 바뀌게 만들고 싶어서요…
현재는 검색창에 뭔가 검색을 하면, 그냥 새로고침되는 듯하고, 현재 페이지 주소 맨 뒤에 물음표가 하나 붙고만 말아요 ㅠㅜ
페이지 새로고침 안하고 그대로인 상태에서 중심좌표만 움직이게 만들고 싶습니다 ㅠㅜ
현재 코드는 아래와 같은 상태입니다
var map = new kakao.maps.Map(document.getElementById(‘map’), { // 지도를 표시할 div
center: new kakao.maps.LatLng(36.431145, 127.948879), // 지도의 중심좌표
level: 12 // 지도의 확대 레벨
});
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 6 // 클러스터 할 최소 지도 레벨
});
// 데이터를 가져오기 위해 jQuery를 사용합니다
// 데이터를 가져와 마커를 생성하고 클러스터러 객체에 넘겨줍니다
$.get("/bbs/retail_map.json", function (data) {
// 데이터에서 좌표 값을 가지고 마커를 표시합니다
// 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
var markers = $(data.positions).map(function (i, position) {
var maks = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(position.x, position.y)
});
var infowindow = new kakao.maps.InfoWindow({
content: position.name,
removable: true
});
kakao.maps.event.addListener(maks, 'click', makeClickListener(map, maks, infowindow));
kakao.maps.event.addListener(maks, 'mouseover', makeOverListener(map, maks, infowindow));
kakao.maps.event.addListener(maks, 'mouseout', makeOutListener(infowindow));
return maks;
});
// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);
});
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
infowindow.close();
return function () {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function () {
infowindow.close();
};
}
function makeClickListener(map, markers, infowindow) {
return function() {
$('.map_box').show();
$('.retail_name').text('클릭한매장명');
$('.retail_address').text('클릭한매장주소');
};
}
var addr = $('#address').val();
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
$('#address_search').submit(
function(){
// 주소로 좌표를 검색합니다
geocoder.addressSearch(addr, function(result, status) {
console.log(addr);
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
});
}
);
라이브러리는 클러스터러랑 서비스 추가해 두었구요…
클러스터러 등 나머지는 어찌저찌 검색해서 잘 작동되는 것 같은데…
이거는 도저히 감이 안 집히네요ㅠㅜ
https://apis.map.kakao.com/web/sample/addr2coord/
여기 참고해서 해보고 있는 중입니다 ㅠㅜ
바쁘신데 시간 뺏는 것 같아서 정말 죄송하지만, 도움 부탁드립니다!