지도에 마커를 찍는 작업을 하는 중 제 짧은 지식으로는 해결이 안되는 문제가 있어서 올립니다.
<!--카카오 지도 API-->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=appkey&libraries=services"></script>
/* 지도 영역 */
// 카카오 지도 생성
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.4509, 126.6493), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소를 담을 객체 생성
var viewAddr = null;
// #collapseTwo 의 주소 ul의 정보를 가져오는 jQuery
$("#collapseTwo ul:eq(2)>li").each(function(index,element){
// 객체에 주소 담기
viewAddr=$(this).text();
console.log($(this).text());
});
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 변환된 좌표를 담을 변수 생성
var changedCoor= (33.4509, 126.6493);
// 주소로 좌표를 검색합니다
geocoder.addressSearch( viewAddr, 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;font-size: 5px">[[${result.name}]]</div>'
});
infowindow.open(map, marker);
map.setCenter(coords);
changedCoor=coords;
console.log('changedCoor : '+changedCoor)
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
}
});
// 아코디언이 실행 된 후 실행
$('#mapOn').click(function () {
console.log('relayout실행1')
map.relayout();
})
function relayout() {
console.log('relayout버튼 실행');
map.relayout();
map.setCenter(new kakao.maps.LatLng(changedCoor));
}
답변 감사합니다. 우선 말씀해주신대로 고쳐서 아코디언 클릭시 반응해 중앙으로 오는 것까지 확인되었습니다.
고친 코드는 아래입니다.
/* 지도 영역 */
// 카카오 지도 생성
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.4509, 126.6493), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소를 담을 객체 생성
var viewAddr = null;
// #collapseTwo 의 주소 ul의 정보를 가져오는 jQuery
$("#collapseTwo ul:eq(2)>li").each(function(index,element){
// 객체에 주소 담기
viewAddr=$(this).text();
console.log($(this).text());
});
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 변환된 좌표를 담을 변수 생성
var changedCoor_y= 33.4509;
var changedCoor_x= 126.6493;
// 주소로 좌표를 검색합니다
geocoder.addressSearch( viewAddr, 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;font-size: 5px">[[${result.name}]]</div>'
});
infowindow.open(map, marker);
console.log('setCenter() 실행전 relayout() 실행')
map.relayout();
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
changedCoor_y=result[0].y;
changedCoor_x=result[0].x;
console.log('changedCoor_y : '+changedCoor_y);
console.log('changedCoor_x : '+changedCoor_x);
}
});
// 아코디언이 실행 된 후 실행
$('#mapOn').click(function () {
console.log('relayout실행1')
relayout();
})
function relayout() {
console.log('relayout버튼 실행');
// 지도를 표시하는 div 크기를 변경한 이후 지도가 정상적으로 표출되지 않을 수도 있습니다
// 크기를 변경한 이후에는 반드시 map.relayout 함수를 호출해야 합니다
// window의 resize 이벤트에 의한 크기변경은 map.relayout 함수가 자동으로 호출됩니다
map.relayout();
map.setCenter(new kakao.maps.LatLng(changedCoor_y,changedCoor_x));
}
위와 같은 코드로 실행 했을때 작동은 잘되었습니다.
여기서 궁금한 점은
map.setCenter(coords); 이 코드의 실행 유무 입니다. 이게 실행이 되었다면 ‘#mapOn’ 클릭이벤트와 그 아래부분을 호출않았어도 되어야 하는 것 아닌지 궁금합니다.
// 아코디언이 실행 된 후 실행
$('#mapOn').click(function () {
console.log('relayout실행1')
relayout();
})
function relayout() {
console.log('relayout버튼 실행');
// 지도를 표시하는 div 크기를 변경한 이후 지도가 정상적으로 표출되지 않을 수도 있습니다
// 크기를 변경한 이후에는 반드시 map.relayout 함수를 호출해야 합니다
// window의 resize 이벤트에 의한 크기변경은 map.relayout 함수가 자동으로 호출됩니다
map.relayout();
map.setCenter(new kakao.maps.LatLng(changedCoor_y,changedCoor_x));
}
