Javascript KAKAO API 특정 마커에만 Infowindow 표시

Question

안녕하세요, 웹개발 공부중인 학생입니다.다름이 아니라 카카오맵 API를 이용하여, 특정 지역 데이터를 Json으로 받아와 geocoder를 이용해 위치를 표시하는 기능까지 구현과 위치 주변에 있는 등록되어있는 좌표(Json등록된)를 마커표시하는데까지는 성공했는데요. 한개의 Json파일내 등록된 category별로 django view에서 분류를 통해 템플릿단에서 json으로 파싱하였습니다.(각각 카테고리별로 마커 표시/숨기기를 하기 위해 여러 dict를 생성해서 json.dump를 통해 넘겨줬습니다)&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;하고자 하는것은,Category별로 등록된 전체 마커를 표시하거나 숨기는데 까지는 구현에 성공했습니다, 여기부터 질문입니다.마커를 표시하거나 숨기는 버튼 이외의 별개의 버튼을 이용하여 사용자 주변에 있는 해당 카테고리에 속하는 위치 마커들의 infowindow를 일괄적으로 숨기거나, 표시하고 싶은데 이 부분에서 함수를 어떻게 짜야할지 잘 모르겠습니다 ㅠㅠ 아래 코드에서 checknearCafeMarker함수에서https://apis.map.kakao.com/web/sample/basicInfoWindow/ 를 이용하면 될것같긴한데타 function에서 생성한 Marker들의 infowindows만 띄울 수 있도록 함수작성이 가능한지 여쭤보고자 질문드렸습니다var 사용, scope문제 등등으로 잘 안되더라구요.... Django로 웹개발을 배운지 이제 한달이라 주먹구구식이라서 코드가 보기 좋지는 않겠지만, 일단 구현에 집중해보고자 합니다.불편하시겠지만 그래도 도움을 좀 부탁드립니다 감사합니다 ㅠㅠ //cafe 마커 어레이 var cafemarkers &#61; []; //cafe 마크(현재위치 주변) 띄우기 var cafes &#61; JSON.parse(&#34;{{ cafeJson|escapejs }}&#34;); console.log(cafes); //cafe 마크 이미지 var geocoder &#61; new kakao.maps.services.Geocoder(); for (let i &#61; 0; i < cafes.length; i&#43;&#43;) { geocoder.addressSearch(cafes[i].address, function(result, status){ if(status &#61;&#61;&#61; kakao.maps.services.Status.OK){ var imageSrc &#61;imageselector(cafes[i].category); var imageSize &#61; new kakao.maps.Size(24, 35); var markerImage &#61; new kakao.maps.MarkerImage(imageSrc, imageSize); var coords &#61; new kakao.maps.LatLng(result[0].y, result[0].x); var cafemarker &#61; new kakao.maps.Marker({ map: null, position: coords, title: cafes[i].title, image: markerImage, }); } cafemarkers.push(cafemarker); overraycustompark(cafemarker, cafes[i]); }); } function showCafeMarker() { var radius &#61; 2000; var c1 &#61; map.getCenter(); for (var i &#61; 0; i < cafemarkers.length; i&#43;&#43;) { var c2 &#61; cafemarkers[i].getPosition(); var poly &#61; new kakao.maps.Polyline({ path: [c1, c2], }); var dist &#61; poly.getLength(); console.log(dist); if (dist < radius) { cafemarkers[i].setMap(map); } else { cafemarkers[i].setMap(null); } } } function checknearCafeMarker() { var x &#61; document.getElementById(&#34;nearcafe&#34;); if (x.style.opacity &#61;&#61;&#61; &#34;1&#34;) { x.style.opacity &#61; &#34;0.5&#34;; showCafeMarker(); } else { x.style.opacity &#61; &#34;1&#34;; hideMarkers(cafemarkers); } } //모든 cafe 마크 띄우기(save용) function checkallCafeMarker() { var x &#61; document.getElementById(&#34;allcafe&#34;); if (x.style.opacity &#61;&#61;&#61; &#34;1&#34;) { x.style.opacity &#61; &#34;0.5&#34;; showMarkers(cafemarkers); } else { x.style.opacity &#61; &#34;1&#34;; hideMarkers(cafemarkers); } }

yeori · Accepted Answer

* 주소로 좌표 찾는 geocoder 기능과 좌표로 마커를 찍는 기능이 뒤섞여서 기능 추가를 어렵게 합니다* 카카오 Api 특성상 activemarkers와 active infowindows 를 관리하는 클래스든 뭐든 별개의 자료 구조가 필요합니다(설계)마구잡이로 코드를 바를게 아니면 다 고쳐야 합니다.

K-Nested · Answer

기존에는 Marker에 hover를 통해 infowindow가 뜨게 되어있는데,새로 near함수를 사용할 경우 hover 필요 없이 그냥 infowindow가 뜨게 하고 싶습니다...!좀 더 구체적으로 질문드리지 못해 죄송합니다 ㅠㅠ 실력이 부족하니 질문도 구체적이지 못하게되네요....

K-Nested · Answer

허억.... 감사합니다......ㅠㅠ

Javascript KAKAO API 특정 마커에만 Infowindow 표시

3개의 답변

#kakaomap 목록