카카오 api 인포윈도우 크기 변화시키는 방법

Question

안녕하세요 ? 현재 웹개발을 처음 공부하고 있는 학생입니다 .다름이 아니라 제가 카카오 지도 api를 이용해서 인포윈도우를 만들고 그 인포윈도우를 지도의 확대수준에 맞게 변화시키는 코드를 짜고싶습니다. ${}도 이용해 보고 여러방법을 사용해 보았는데 style부분에 잘 적용이 되지않은거 같아서 글을쓰게 되었습니다. 콘솔로 확인결과 getInfoWindowSize()함수에서 지도의 레벨 값을 가져와서 반환하는 것은 확인을 했습니다 . 구글링도 많이 하고 많이 찾아봤는데 아직 해결을 하지 못해서 방법을 알려주시면 감사하겠습니다 ㅜㅜ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 = `

" alt="Hospital image" style="width:200px; height: 200px;">

이름	<%= list.get(i).getHospital_name() %>
주소	<%= list.get(i).getAddress() %>
타입	<%= list.get(i).getType() %>
지도의 타입

`; 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() { // 인포윈도우가 열려 있는 상태라면 이미지 크기 업데이트 var imagewidth = getImageWidth(); var infowindowsize = getInfoWindowSize(); console.log("Updated InfoWindow Size: ", infowindowsize); var message = '현재 지도 레벨은 ' + infowindowsize + ' 입니다'; var resultDiv = document.getElementById('result'); resultDiv.innerHTML = message; if (infowindow.getMap()) { var updatedContent = `

<-- 문제가 되는 부분입니다 ㅜㅜ --> " alt="Hospital image" style="width:200px; height: 200px;">

이름	<%= list.get(i).getHospital_name() %>
주소	<%= list.get(i).getAddress() %>
타입	<%= list.get(i).getType() %>
지도의 타입

`; infowindow.setContent(updatedContent); // 확대/축소된 이미지 크기 반영 } });

하태연 · Answer

before:

after:

이렇게 적용하면 문제 없을 것 같은데.. 그래도 안 되시나요?

카카오 api 인포윈도우 크기 변화시키는 방법

1개의 답변

Q&A 목록