http://apis.map.kakao.com/web/sample/markerWithInfoWindow/
지도 마커에에 인포윈도우를 띄우는 예제입니다.
마우스 휠로 맵을 확대하거나 축소할수있잖아요..
휠할때 맵레벨이 10이상일때만 인포윈도우를 띄울수 있게 하고싶습니다.
스크립트단 소스 첨부합니다..
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption);
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(33.450701, 126.570667);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
var iwContent = '<div style="padding:5px;">Hello World! <br><a href="https://map.kakao.com/link/map/Hello World!,33.450701,126.570667" style="color:blue" target="_blank">큰지도보기</a> <a href="https://map.kakao.com/link/to/Hello World!,33.450701,126.570667" style="color:blue" target="_blank">길찾기</a></div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
iwPosition = new kakao.maps.LatLng(33.450701, 126.570667); //인포윈도우 표시 위치입니다
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
position : iwPosition,
content : iwContent
});
// 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
infowindow.open(map, marker);
</script>
답변 1개
채택된 답변
+20 포인트
2020-03-25 (수) 12:41:45
처음에는 infowindow.open(map, marker); 코드를 삭제하고
지도 객체의 zoom_change 이벤트 발생시에 map.getLevel 의 값에 따라
infowindow.open(map, marker); 또는 infowindow.close(); 로 분기 시켜야 될거 같네요
Copy
kakao.maps.event.addListener(map, 'zoom_changed', function() {
var level = map.getLevel();
var infoMap = infowindow.getMap();
if (level >= 10) {
// 이미 추가되어 있다면 새로 만들지 않는다.
if (map !== infoMap) {
infowindow.open(map, marker);
}
} else {
infowindow.close();
}
});답변을 작성하려면 로그인이 필요합니다.