React (카카오 맵) 줌 인 아웃 버튼 넣기

 

마우스를 사용하지 않는 사용자를 위해서 지도위에 줌 인 아웃을 할 수 있는 버튼을 만들었습니다.

 

Map.js

useState를 이용해서 맵 정보를 useEffect 밖을 빼내고 줌 인 아웃 함수를 버튼에 넣어서 사용했습니다.

 

const Map = (props) => {
	const [_map, setMap ] = useState();
    
	useEffect(() => {
      const container = document.getElementById('myMap'); //지도 표시할 div
        const options = {
          center: new kakao.maps.LatLng(37.545642179638556, 126.98117041998981), //지도 중심 좌표
          level: 8 //지도의 확대 레벨
        };
      const map = new kakao.maps.Map(container, options);//지도를 생성합니다.

      // useEffect밖으로 map정보를 가져오기위해 useState로 함수를 만들었습니다.
      setMap(map)

   	}, [normalMarker])
    

	//useState로 map정보를 가져와서 지도 줌인아웃 기능을 추가했습니다.
    const zoomIn = () => {
      _map.setLevel(_map.getLevel() - 1);
    }

    const zoomOut = () => {
      _map.setLevel(_map.getLevel() + 1);
    }
    
    return(
      <React.Fragment>
          <MapContainer id='myMap'>
            <MapBtnContainer>
                <MapControlBtn  onClick={zoomIn} style={{borderRight: "1px solid #919191"}} ><AddIcon/></MapControlBtn>
                <MapControlBtn  onClick={zoomOut}  ><RemoveIcon/></MapControlBtn>
            </MapBtnContainer>
          </ MapContainer>
      </React.Fragment>
    )
       

}

const MapContainer = styled.div`
  position: relative;
  margin: auto;
  margin-bottom: 60px;
  width: 900px;
  height: 500px;
  @media (max-width: 1000px){
    width: 85%;
  };
  @media (max-width: 450px){
    width: 95%;
    height: 400px;
  }
`

const MapBtnContainer = styled.div`
  position: absolute;
  top: 15px;
  right: 10px;
  z-index: 5;
  border-radius: 5px;
  display: flex;
  align-items: center;
  border:1px solid #919191;
  background-color: #F5F5F5;
`

const MapControlBtn = styled.div`
  width:40px;
  height:30px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
  cursor:pointer;
`