[React] 카카오 지도 구현

2023. 4. 24. 06:03·Front/React

React + JavaScript를 사용해 카카오지도를 구현했다.

전체코드

import React, { useEffect, useState, useMemo } from "react";
import Marker from "../components/Marker";
const { kakao } = window;

export default function StudyMap() {
  // 현재위치 담는 곳
  const [location, setLocation] = useState("");
  const [map, setMap] = useState();

  // 현재위치 세부조정
  var options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0,
  };

  // 현재 위치 가져오기
  useMemo(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(success, error, options);
    }

    function success(position) {
      setLocation({
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
      });
    }

    function error() {
      setLocation({
        latitude: 33.450701,
        longitude: 126.570667,
      });
      console.log("위치 받기 실패");
    }
  }, [navigator.geolocation.getCurrentPosition]);

  // 카카오지도 API 가져오기
  const kakaoMap = () => {
    const container = document.getElementById("map");
    const options = {
      center: new kakao.maps.LatLng(location.latitude, location.longitude),
      level: 3,
    };
    setMap(new kakao.maps.Map(container, options));
  };

  // 화면에 랜더링
  useEffect(() => {
    kakaoMap();
    console.log(location);
  }, [location]);

  return (
    <>
      <div id="map" style={{ width: "100vw", height: "100vh" }}>
        <Marker map={map} location={location} kakao={kakao} />
      </div>
    </>
  );
}

 

 

 

저작자표시 (새창열림)

'Front > React' 카테고리의 다른 글

React와 Next.js의 차이와 Next.js 프로젝트 생성하기  (0) 2024.01.22
[React] 동기 / 비동기 통신  (0) 2023.08.28
Next.js 리렌더링하면 Styled-Components 적용 안됨  (0) 2023.04.13
[React] Edit Page 보완 - defaultValue와 myvariables  (0) 2023.03.18
[Error] cSpell Unknown word 무시하기  (0) 2023.03.16
'Front/React' 카테고리의 다른 글
  • React와 Next.js의 차이와 Next.js 프로젝트 생성하기
  • [React] 동기 / 비동기 통신
  • Next.js 리렌더링하면 Styled-Components 적용 안됨
  • [React] Edit Page 보완 - defaultValue와 myvariables
soyeon26
soyeon26
  • soyeon26
    개발 일지
    soyeon26
  • 전체
    오늘
    어제
    • 분류 전체보기 (86)
      • Web (1)
        • Web (1)
        • HTTP (0)
      • Java (25)
        • JVM (0)
      • Spring (9)
      • AWS (0)
      • Language (4)
        • Java Script (3)
        • Type Srcipt (1)
      • Front (19)
        • HTML+CSS (4)
        • React (15)
      • Back (20)
        • JSP (0)
        • Database (5)
        • NestJS (6)
      • Devops (6)
        • Docker (1)
        • Git & SVN (5)
      • App (7)
        • Android (7)
      • IT 정보 (3)
      • 회고록 (0)
  • 블로그 메뉴

    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    과학기술인 등록
    스프링부트
    강의 후기
    javascript
    SQL강의 추천
    React Next.js
    springboot
    CSR
    중복제거
    React
    csr과ssr의 차이
    자바스크립트set
    SSR
    데이터베이스 강의
    프론트엔드
    Next.js 필요성
    과학기술인 등록번호 발급
    백엔드
    과학기술인 번호 발급
    과학기술인등록번호 조회
    인프런
    Java
    java의 정석
    과학기술인번호 조회
    Spring
    강의후기
    csrvsssr
    Next.js
    sql강의
    김영한
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
soyeon26
[React] 카카오 지도 구현
상단으로

티스토리툴바