Guide | T MAP API

• 어떤 종류의 지도를 사용할 것인가?

  TMap 성능 측정 및 비교

Tmap API 를 사용한 이유

• 모각코 게시글 작성 시 장소를 검색하여 입력받도록 기획하였다.

• 장소 검색 시 자동 완성 지원(⬇️와 같은)과 지도 렌더링을 같이 할 수 있는 API를 찾아보다가 Tmap API로 결정하였다.

  

지도 렌더링

• index.html에 script태그 추가

  <script src="<https://apis.openapi.sk.com/tmap/vectorjs?version=1&appKey=>{발급받은 APP_KEY}"></script>
  

• window 객체에 Tmapv3 프로퍼티 추가

• 지도 컴포넌트 작성

  • 아래와 같이 작성하면 지도를 생성할 수 있다.

    const { Tmapv3 } = window;
    
    export function Map() {
    	const map = new Tmapv3.Map('map', {
    		// 초기 지도 중심 좌표
        center: new Tmapv3.LatLng(INITIAL_LATITUDE, INITIAL_LONGITUDE),
    		// 초기 지도 줌 레벨
        zoom: DEFAULT_ZOOM_LEVEL,
      });
    
    	return (
    		<>
    			<div id="map" />
    		</>
    	)
    }
    

지도에 마커 표시하기

• 모각코 데이터의 좌표 정보를 사용하여 마커 표시

  // 모각코 데이터마다 마커를 표시한다
  mogacoList?.forEach((mogaco: ResponseMogacoDto) => {
    const { id, latitude, longitude } = mogaco;
    if (latitude && longitude) {
  		// 모각코의 좌표 정보로 Tmapv3.LatLng 인스턴스 생성
      const position = new Tmapv3.LatLng(latitude, longitude);
  		// 마커 생성
      const marker = new Tmapv3.Marker({
  			// 마커를 표시할 지도 설정
        map: mapInstance,
  			// 마커의 위치 좌표
        position,
  			// 마커 라벨 설정(모각코의 날짜, 시간 정보 사용)
        label: dayjs(mogaco.date).format('MM/DD(ddd) HH:mm'),
      });
    }
  });
  

• 마커에 마우스 이벤트를 등록

  • 마우스 클릭 시 마커를 중심으로 시점 이동
  • 마커를 중심으로 확대
  • 사이드 바 열기
    • 사이드 바를 여는 함수를 props로 전달받아 사용한다.

  marker.on('Click', () => {
  	// 마커를 중심으로 시점 이동
    mapInstance.setCenter(position);
  	// 마커를 중심으로 확대
    mapInstance.setZoom(MAX_ZOOM_LEVEL);
  	// 사이드 바 열기
    onClickMarker(id);
  });
  

• 마커 이미지 커스텀

  export function Marker({
    mapContent,
    position,
    theme,
    labelText,
  }: MarkerProps) {
    const markerIcon = theme === 'green' ? markerGreen : markerRed;
    return new Tmapv3.Marker({
      position,
      map: mapContent,
  		// 마커 아이콘(url)
      icon: markerIcon,
      iconSize: new Tmapv3.Size(50, 50),
  		// 마커 라벨(string)
      label: labelText
        ? reactElementToString(
            <span className={styles.label({ theme })}>{labelText}</span>,
          )
        : '',
    });
  }
  

• 기본 마커

  

• 커스텀 마커

  

현 위치 표시하기

• Geolocation API를 사용하여 사용자의 현 위치를 표시한다.

  const setMyLocation = (mapInstance: Tmap) => {
  	// Geolocation API를 통해 현 위치정보를 불러왔을 때 실행할 함수
    const onSuccess = (position: Geolocation) => {
      const { latitude, longitude } = position.coords;
  		const myPosition= new Tmapv3.LatLng(latitude, longitude);
  		// 지도의 중심 좌표를 현 위치로 설정
      mapInstance?.setCenter(myPosition);
    };
    navigator.geolocation.getCurrentPosition(onSuccess);
  };