[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)
  • 블로그 메뉴

    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

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

  • 최근 글

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

티스토리툴바