[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
$.ajax({
url : “/admin/tour/tourDetailPost”,
data : {
“tourId” : tourId
},
type : “post”,
dataType : “json”,
beforeSend : function (xhr) {
xhr.setRequestHeader(“${_csrf.headerName}”,“${_csrf.token}”);
},
success : function(success) {
if(success != null) {
let tourNm = success.tourNm; // 인포 윈도우에 표시할 여행지 이름
let lati = success.lati; // 여행지 위도
let longi = success.longi; // 여행지 경도
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(lati, longi), // 지도의 중심좌표
level: 2 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption);
var markerPosition = new kakao.maps.LatLng(lati, longi);
var marker = new kakao.maps.Marker({
position: markerPosition
});
marker.setMap(map);
var iwContent = '<div style="margin-left:17px; margin-top:2px; text-align:"center;"><h6
class="card-title mb-0">'+tourNm+'</h6><br></div>',
iwPosition = new kakao.maps.LatLng(lati, longi);
var infowindow = new kakao.maps.InfoWindow({
position : iwPosition,
content : iwContent
});
infowindow.open(map, marker);
map.relayout();
}
}
});
안녕하세요. 프로젝트 진행 중 막히는 부분이 있어 질문 올립니다.
위 코드처럼 ajax 를 이용해 db 로 부터 위도, 경도 값을 가져와 지도에 해당 위치에 대한 마커와 인포 윈도우를 찍으려고 하는데
본 이미지 처럼 마커 위치가 좌상단에 위치되도록 불러와질 뿐만 아니라 지도가 좌상단 일부만 로드되는 문제가 발생했습니다. 웹 브라우저는 크롬을 사용하고 있고 브라우저의 크기가 resize 되면 제대로 나오기는 합니다만 …
코드 상에서 .relayout() 을 호출해도 위 이미지와 같은 현상이 반복됩니다
사이트 디자인은 부트스트랩을 사용 중이고 해당 부트스트랩에서 지원하는 모달 컴포넌트를 사용하고 있습니다
혹시라도 해결 방법이 있다면 꼭 알려주시면 감사하겠습니다