안녕하세요! 개발 공부를 하고 있는 학생입니다!!
이번에 프로젝트를 진행하게 되면서 지도 api 기능을 맡게되었습니다.
카카오 map api 문서와 구글링을 통해 한 단계씩 도장깨는 마음으로 지도 기능을 구현중인데요.
마지막으로 남은 구현이 커스텀 오버레이 활용하는 부분입니다.
구현 과정에서 구글링과 문서, Dev Talk 게시글들을 보아도 잘 모르겠어서 이렇게 질문합니다.
제가 완성해야하는 기능의 최종 모습은 위 사진과 같습니다!!
현재 제가 구현한 상태입니다.
마커에 마우스 오버 시 장소 이름이 나타나야하는데,
혹시 몰라 전체 코드 첨부합니다!!
// 장소 검색 객체를 생성합니다
const ps = new kakao.maps.services.Places();
// 키워드로 장소를 검색합니다
searchPlaces();
// 키워드 검색을 요청하는 함수
function searchPlaces() {
const keyword = searchPlace;
if (!keyword.replace(/^\s+|\s+$/g, "")) {
return false;
}
// 장소검색 객체를 통해 키워드로 장소검색을 요청
ps.keywordSearch(searchPlace, placesSearchCB);
}
//키워드 확인을 위한 콘솔
// console.log(searchPlace);
// 장소검색이 완료됐을 때 호출되는 콜백함수 입니다
function placesSearchCB(data, status, _pagination) {
if (status === kakao.maps.services.Status.OK) {
const bounds = new kakao.maps.LatLngBounds();
for (let i = 0; i < data.length; i++) {
displayMarker(data[i]);
bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
//경도, 위도
// console.log(data[i].y, data[i].x);
}
// 검색된 장소 위치를 기준으로 지도 범위를 재설정
map.setBounds(bounds);
}
}
// 검색 결과 목록과 마커를 표출하는 함수입니다
function displayMarker(place) {
const imageSrc = small;
const imageSize = new kakao.maps.Size(32, 40);
const imageOption = { offset: new kakao.maps.Point(17, 36) };
const markerImage = new kakao.maps.MarkerImage(
imageSrc,
imageSize,
imageOption
);
// console.log(place);
// console.log(typeof place.x);
let marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(place.y, place.x),
image: markerImage,
});
const iwContent = `<div class="info-title_div"><span class="info-title_span">${place.place_name}</span></div>`;
// 마커에 표시할 인포윈도우를 생성합니다
const infowindow = new kakao.maps.InfoWindow({
content: iwContent,
});
(function (marker, infowindow) {
// 마커에 mouseover 이벤트를 등록하고 마우스 오버 시 인포윈도우를 표시합니다
kakao.maps.event.addListener(marker, "mouseover", function () {
infowindow.open(map, marker);
});
// 마커에 mouseout 이벤트를 등록하고 마우스 아웃 시 인포윈도우를 닫습니다
kakao.maps.event.addListener(marker, "mouseout", function () {
infowindow.close();
});
})(marker, infowindow);
}
인포윈도우 부분만 제거하는 방법이 있을까요?
공식 문서 외 제가 찾아봤던 게시글도 함께 첨부합니다!!
그누보드 - 카카오지도 인포윈도우(infoWindow) 커스텀하기 > 그누보드5 팁자료실 (sir.kr)
React - Kakao Maps API 이용하기(feat. 커스텀 오버레이) (velog.io)