[TIL]240110_카카오맵 마커찍기

👩🏻‍💻 Today Learn

• 기술면접 스터디
• 카카오맵 마커찍기

📚 카카오맵 원하는 위치에 마커찍기(최대1개)

미리 설치해놓은 react-kakao-maps-sdk 에서 제공해주는 기능 덕에 MapMarker가 어렵지는 않지만(나는 헤맸음..;) 마커를 나름 커스텀해보기도 하였다..!

 <div id="map" className={style['map-wrap']}>
        <Script src={KAKAO_SDK_URL} strategy="beforeInteractive" />
        <Map
          center={{ lat: currentLocation.latitude, lng: currentLocation.longitude }}
          level={3}
          style={{ width: '100%', height: '100%' }}
          onClick={mapClickHandler}
        >
          <MapTypeControl position={'TOPRIGHT'} />
          <ZoomControl position={'RIGHT'} />
          {position && (
            <MapMarker
              position={position}
				// 마커 이미지 변경
              image={{
                src: 'https://i.ibb.co/hLdk42x/dog-marker-removebg-preview.png',
                // 마커이미지의 크기
                size: {
                  width: 90,
                  height: 95
                },
                // 마커이미지의 옵션으로 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정할 수 있다
                options: {
                  offset: {
                    x: 45,
                    y: 70
                  }
                }
              }}
            ></MapMarker>
          )}
          {position && (
            <p>
              {'선택하신 위치의 위도는 ' +
                position.lat +
                ' 이고, 경도는 ' +
                position.lng +
                ' 입니다'}
            </p>
          )}
        </Map>
      </div>

마커를 찍는 위치의 위도 경도를 출력하도록 하였다.

TODO

• 위도 경도에 따른 주소값 가져오기
• 키워드 검색으로 주소찾기

✍🏻 회고

문서가 잘 되어 있기는 하지만 javascript로 되어있기 때문에 내 프로젝트에 적용하는건 쉽지 않았다.
typescript에서 type에러가 발생하거나.. 그냥 오류가 발생하거나... 난리 부르스여서 속이 터지기도 하지만 뭐 어쩌겠는감