반응형
오픈소스 이용하여 카카오 맵 API 사용하기
마커에 인포윈도우 표시하기, 여러개 마커 표시하기 이용
여러개 마커 표시하기 기능은 마커에 인포윈도우가 뜨게 재설정
CSS로 인포윈도우 text 크기 조절, bold 처리
[결과]
[코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_kakaomap.html</title>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> -->
</head>
<body>
<div id="map" style="width:500px;height:400px;"></div> <!-- 지도가 나타나는 곳 -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 키 입력"></script>
<script>
var mapContainer = document.getElementById('map');
var mapOptions = {
center: new kakao.maps.LatLng(37.7885522,126.6984694), // 지도의 중심좌표
level: 4 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성
var map = new kakao.maps.Map(mapContainer, mapOptions);
var markerPosition = new kakao.maps.LatLng(37.7885522,126.6984694);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
var iwContent = '<div style="padding:5px; font-weight: bold;">헤이리예술마을<br><a href="https://map.kakao.com/link/map/헤이리예술마을,37.7885522,126.6984694" style="color:blue; font-size: 14px;" target="_blank">큰지도보기</a> <a href="https://map.kakao.com/link/to/헤이리예술마을,37.7885522,126.6984694" style="color:blue; font-size: 14px;" target="_blank">길찾기</a></div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
iwPosition = new kakao.maps.LatLng(37.7885522,126.6984694); //인포윈도우 표시 위치입니다
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
position : iwPosition,
content : iwContent
});
// 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
infowindow.open(map, marker);
// -----------------------------------------------------------------------------------------------------------------
// 마커를 표시할 위치와 title 객체 배열입니다
var positions = [
{
content: '<div style="font-size: 13px; text-indent: 5px;">가드너스</div>',
latlng: new kakao.maps.LatLng(37.7896533,126.6960916)
},
{
content: '<div style="font-size: 13px; text-indent: 5px;">식물감각</div>',
latlng: new kakao.maps.LatLng(37.7875188,126.6986572)
},
{
content: '<div style="font-size: 13px; text-indent: 5px;">웨딩마을</div>',
latlng: new kakao.maps.LatLng(37.7889107,126.7001452)
},
{
content: '<div style="font-size: 13px; text-indent: 5px;">세계인형박물관</div>',
latlng: new kakao.maps.LatLng(37.7869362,126.7020858)
}
];
// 마커 이미지의 이미지 주소입니다
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
for (var i = 0; i < positions.length; i ++) {
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
image : markerImage // 마커 이미지
});
// 마커에 표시할 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: positions[i].content // 인포윈도우에 표시할 내용
});
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
}
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
</script>
</body>
</html>반응형
'Front-End > JavaScript' 카테고리의 다른 글
| jQuery 예습 (0) | 2023.03.28 |
|---|---|
| JavaScript(9) - API 사용하기(1) (0) | 2023.02.21 |
| JavaScript(8) (0) | 2023.02.20 |
댓글