마커 클릭 표시 수정

[bhs3066]

기능 수정

default.mp4

// 공공 흡연장소 마커 생성

 let clickedPublicMarker = null; // 클릭된 공공 흡연장소 마커를 저장하는 변수

 function createPublickSmokingZoneMarker(
    map,
    position, 
    title,  
    img,
    address, 
    userType,
    cleanlinessRating = 0,
    hasAshtray = false, // 전달된 인수가 없을 떄 기본값
    isindoor, // 개방형, 폐쇄형 등등
    reportType = "public" // Default to smokerReport
  ) {

...

    // 지도가 클릭되면 선택된 마커가 다시 원래 이미지로 돌아오게 함
    kakao.maps.event.addListener(map, "click", () => {
      if (clickedPublicMarker) {
        clickedPublicMarker.setImage(publicSmokingZoneMarkerImage);
      }
      clickedPublicMarker = null;
    });

...

}

마커를 누르고 맵을 다시 누르면 Info 모달은 사라지지만 변경된 마커이미지는 그대로 유지되던 문제를 해결. 위의 코드와 같이 map을 누르고 클릭된 공공흡연장소마커가 존재한다면 그 마커의 이미지를 기존으로 되돌리고 클릭된 마커데이터를 null로 초기화한다.

---

default.mp4

  let clickedMarker = null; // 클릭된 마커를 저장하는 변수
  let firstClickedMarkerType = null; // 클릭된 마커를 저장하는 변수

function createMarker(
    map,
    position,
    title,
    img,
    address,
    userType,
    cleanlinessRating = 0,
    hasAshtray = false, // 전달된 인수가 없을 떄 기본값
    isindoor = true, // 전달된 인수가 없을 떄 기본값
    reportType = "smokerReport", // Default to smokerReport
    likesCount = 0,
    placeId,
    isClikced = false,
    isDirect
  ) {

...

        kakao.maps.event.addListener(map, "click", () => {
            if (clickedMarker) {
              if (firstClickedMarkerType === "smokerReport") {
                clickedMarker.setImage(smokeReportMarkerImage);
                firstClickedMarkerType = reportType;
              } else if (firstClickedMarkerType === "nonSmokerReport") {
                clickedMarker.setImage(nonSmokeReportMarkerImage);
                firstClickedMarkerType = reportType;
              } else {
                clickedMarker.setImage(publicSmokingZoneMarkerImage);
                firstClickedMarkerType = reportType;
              }
            }
        clickedMarker = null;
      });

...

}

제보된 장소 마커의 경우에는 2가지 타입이 있기에 클릭된 마커의 타입을 저장하는 firstClickedMarkerType 변수를 통해 맵을 클릭했을 경우 clickedMarker 의 해당되는 마커의 이미지를 타입에 맞는 이미지로 변경한다. 이후 결국 맵을 누르면 클릭된 마커는 없으므로 null로 초기화 시킨다.