안녕하세요? 현재 카카오 지도 api를 이용해 웹페이지를 작성을 공부하고 있는 학생입니다.
다름이 아니라 지도를 확대하거나 축소할때 지도마커에 생성된 인포윈도우의 크기를 지도의레벨에 따라서 변화시키고 싶습니다. 예를 들면 지도를 확대했을때 인포윈도우를 작게만드는 형식입니다. 구글링도 해보고 열심히 찾아보았는데 적용이 잘 안되서 여기에 글을쓰게 되었습니다. 코드는 아래와 같고 function getInfoWindowSize()에 지도 레벨에 따른 반환값이 잘 나온는 것은 확인했는데 style부분에서 잘 적용이 되지않는것 같습니다. 해결방법을 알려주시면 정말 감사하겠습니다 ㅜㅜ
function getInfoWindowSize() {
var zoomLevel = map.getLevel(); // 현재 지도 레벨
return 300 / zoomLevel;
}
<% for (int i = 0; i < list.size(); i++) { %>
var markerPosition = new kakao.maps.LatLng(<%= list.get(i).getLatitude() %>, <%= list.get(i).getLongitude() %>);
var marker = new kakao.maps.Marker({
position: markerPosition,
title: '<%= list.get(i).getHospital_id() %>' // 마커에 병원 이름 표시
});
marker.setMap(map); // 마커를 지도에 표시
(function(marker, data) {
kakao.maps.event.addListener(marker, 'click', function() {
var infowindowWidth = getImageWidth();
var content = `
<div style="padding:10px;"> <!-- 수정: 인포윈도우 크기 동적 조정 -->
<img src="<%= list.get(i).getImage() %>" alt="Hospital image" style="width:200px; height: 200px;">
<table border="1" style="border-collapse:collapse; text-align:left;">
<tr>
<th style="white-space: nowrap;">이름</th><td><%= list.get(i).getHospital_name() %></td>
</tr>
<tr>
<th>주소</th><td><%= list.get(i).getAddress() %></td>
</tr>
<tr>
<th>타입</th><td><%= list.get(i).getType() %></td>
</tr>
<tr>
<th>지도의 타입 </th><td></td>
</tr>
</table>
</div>
`;
infowindowContent = {
image: '<%= list.get(i).getImage()%>',
name: '<%= list.get(i).getHospital_name() %>',
address: '<%= list.get(i).getAddress() %>',
type: '<%= list.get(i).getType()%>'
};
infowindow.setContent(content);
infowindow.open(map, marker);
});
})(marker, {
name: '<%= list.get(i).getHospital_name() %>',
address: '주소 정보'
});
kakao.maps.event.addListener(map, 'zoom_changed', function() {
if (infowindow.getMap()) {
var updatedContent = `
<div style="padding:10px; width:' +getInfoWindowSize()+'px;">
<img src="<%= list.get(i).getImage() %>" alt="Hospital image"
style="width:200px; height: 200px;">
<table border="1" style="border-collapse:collapse; text-align:left;">
<tr>
<th style="white-space: nowrap;">이름</th><td><%= list.get(i).getHospital_name() %></td>
</tr>
<tr>
<th>주소</th><td><%= list.get(i).getAddress() %></td>
</tr>
<tr>
<th>타입</th><td><%= list.get(i).getType() %></td>
</tr>
<tr>
<th>지도의 타입 </th><td></td>
</tr>
</table>
</div>
`;
infowindow.setContent(updatedContent); // 확대/축소된 이미지 크기 반영
}
});
<% } %>