React Kakao Map 마커 생성(1)

React Kakao Map 마커 생성 하기

지난 포스트 보러가기

https://velog.io/@bokjunwoo/React-Kakao-Map-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

시작하기에 앞서

TripLog 프로젝트에서는 Kakao Map에 검색 결과에 따라 원하는 위치에 마커를 생성하는 방법이 필요해 구성한 코드에 대한 설명이다.

1. 지도를 내가 원하는 위치에 배치한다.

import { useEffect } from "react";
const { kakao } = window;

export default function KakaoMap() {
  // Kakao Map 사용을 위한 useEffect
  useEffect(() => {
    const container = document.getElementById('map');
    // 기본이 되는 지도 중앙 위치
    const options = {
      center: new kakao.maps.LatLng(33.368, 126.54),
      // 지도 레벨(높을 수록 멀어진다)
      level: 10
    };
    // 지도 생성을 위한 메소드
    const map = new kakao.maps.Map(container, options);
  }, [])
  return (
    <div id="map" style={{ width: '500px', height: '500px' }}></div>
  )
}

• 위의 코드는 제주도를 배경으로 하고 있다
  

2. 마커 생성 방법

new kakao.maps.Marker({
	//마커가 표시 될 지도
	map: map,
	//마커가 표시 될 위치
	position: new kakao.maps.LatLng(33.369, 126.535),
});

• map : map으로 지도를 사용하기 위해 선언한다
• position : 생성하고 싶은 곳의 (위도, 경도)의 값을 넣게 되면 해당 위치에 마커가 생성된다.
  

3. 마커를 여러개 생성하는 방법

• 임의로 하드코딩하여 데이터를 배열로 만들어 준다.

const markerdata = [
  {
    mapy : 33.5066211,
    mapx : 126.492810
  },
  {
    mapy : 33.450705,
    mapx : 126.570677
  },
  {
    mapy : 33.550705,
    mapx : 126.670677
  },
];

• 해당 배열을 forEach문을 이용해 돌려준다

markerdata.forEach((el) => {
	// 지도에 생성할 마커
	new kakao.maps.Marker({
		//마커가 표시 될 지도
		map: map,
		//마커가 표시 될 위치
		position: new kakao.maps.LatLng(el.mapy, el.mapx),
	});
})

다음 포스트

이제 본격적으로 공공데이터포털의 TourAPI를 이용해 지도에 마커를 생성하는 방법에 대해 알아보겠다.