마커 생성까진 성공하였는데 클릭 이벤트가 도저히 구현되지 않네요 , ㅜ 저는 jason에서 데이터를 추출해서 하고 싶은데 카카오 가이드에는 그러지 않고 인포윈도우도 하나만 생성하고 있어 참고하는 것에 제한이 있어 여러가지방법으로 하다 이렇게 문의 드려봅니다. 제 코드를 보고 조언 해주시면 감사하겠습니다 ㅜ (하다 안되는 것은 주석처리하였습니다)
javascript
// 지도
function showMap(positions) {
let mapContainer = document.getElementById("map"); // 지도를 표시할 div
let mapOption = {
center: new kakao.maps.LatLng(37.580966, 127.088503), // 지도의 중심좌표
level: 5, // 지도의 확대 레벨
marker: positions,
};
let map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커 이미지의 이미지 주소입니다
var imageSrc =
"https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
//이미지 마커 표시
positions.forEach((item) => {
let imageSize = new kakao.maps.Size(24, 35);
let markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커 생성
let marker = new kakao.maps.Marker({
map: map,
position: item.latlng,
title: item.name,
image: markerImage,
});
// var infowindow = new kakao.maps.InfoWindow({
// content: data[i][2],
// removable: true,
// });
marker.setMap(map);
// kakao.maps.event.addListener(marker, "click", function () {
// // 마커 위에 인포윈도우를 표시합니다
// infowindow.open(map, marker);
// });
//커스텀 오버레이에 표시할 컨텐츠 입니다
// var content = `<div class="wrap">
// <div class="info">
// <div class="title">
// ${item.name}
// <div class="close" onclick = ${closeOverlay()}
// title="닫기">
// </div>
// </div>
// <div class="body">
// <div class="img">
// <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">
// </div>
// <div class="desc">
// <div class="ellipsis">${item.address}</div>
// <div class="jibun ellipsis">${item.workingtime} </div>
// <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>
// </div>
// </div>
// </div>
// </div>`;
// let content = document.createElement("div");
// let name = document.createElement("div");
// item.name = `${item.name}`;
// let address = document.createElement("div");
// item.name = `${item.address}`;
// let workingtime = document.createElement("div");
// item.name = `${item.workingtime}`;
// content.append(item.name, item.address, item.workingtime);
// let contentClick = new kakao.maps.InfoWindow({
// content: content,
// removable: true,
// });
// // 마커 위에 커스텀오버레이를 표시합니다
// // 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
// var overlay = new kakao.maps.CustomOverlay({
// content: content,
// map: map,
// position: marker.getPosition(),
// });
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
// kakao.maps.event.addListener(marker, "click", function () {
// overlay.setMap(map);
// });
// // 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
// function closeOverlay() {
// overlay.setMap(null);
// }
});
// kakao.maps.event.addListener(map, "click", (mouseEvent) => {
// //클릭한 위도, 경도 정보 불러오기
// const popup = cafeInfo;
// //마커 위치를 클릭한 위치로 이동
// marker.setPosition(latlng);
// marker.setMap(map);
// });
}
json
{
"cafe": [
{
"id": 1,
"name": "상봉커피",
"address": "서울 중랑구 봉우재로 96",
"addressSi": "서울시",
"addressGu": "중랑구",
"workingtime": "화~일 12:00 ~ 18:00",
"Latitude": 37.5918972,
"Longitude": 127.0837317
},
{
"id": 2,
"name": "제주역",
"address": "서울 중랑구 상봉중앙로5다길 49 201호",
"addressSi": "서울시",
"addressGu": "중랑구",
"workingtime": "월~토 12:00 ~ 21:00",
"Latitude": 37.5980667,
"Longitude": 127.0865476
},
{
"id": 3,
"name": "카페 향아",
"address": "서울 중랑구 사가정로46길 18",
"addressSi": "서울시",
"addressGu": "중랑구",
"workingtime": "수~일 12:00 ~ 21:00",
"Latitude": 37.5802264,
"Longitude": 127.084588
},
{
"id": 4,
"name": "단집",
"address": "서울 중랑구 사가정로54길 69 1층",
"addressSi": "서울시",
"addressGu": "중랑구",
"workingtime": "월~금 10:00 ~ 21:00",
"Latitude": 37.578204,
"Longitude": 127.0867491
},
{
"id": 5,
"name": "모코",
"address": "서울 중랑구 면목로49길 33 1층",
"addressSi": "서울시",
"addressGu": "중랑구",
"workingtime": "매일 11:00 ~ 22:00",
"Latitude": 37.5826805,
"Longitude": 127.08664
},
{
"id": 6,
"name": "개인공간",
"address": "서울 중랑구 송림길 12 1층 (우)02086",
"addressSi": "서울시",
"addressGu": "중랑구",
"workingtime": "화~토 12:00 ~ 22:00",
"Latitude": 37.5998681,
"Longitude": 127.0956868
}
]
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pet Map</title>
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="./images/favicon.png">
</head>
<body>
<div class="container">
<header class="header">
<div class="logo">
<img src="./images/logo.png" />
<p id="logo_name">Pet Map</p>
</div>
</header>
<section class="section">
<div class = "map_container">
<div id="map">
</div>
</div>
</section>
<footer class="footer">
<div class="footer_wrap">
<div class="copyright">
<h4>Pet Map</h4>
<p>Copyright © Pet Map Corp. All Rights Reserved.</p>
</div>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=개인키&libraries=services"></script>
<script src="./index 2.js"></script>
</body>
</html>
