React) Kakao map 연동 및 현재 위치 가져오기

https://github.com/junsungc/mybus/releases/tag/v0.1

Release v0.1 · junsungc/mybus

소스코드는 위 링크에서 받을 수 있다.

 

 

결과물)

접속하면 위치 정보 승인 여부를 브라우저에서 묻고,

승낙시 현재위치정보를, 거부시 기본 설정한 위치정보를 가져온다.

import React, { useEffect, useState } from "react"

const { kakao } = window

const Map = () => {
    useEffect(() => {
        (async () => {
            const location = await getUserLocation();
            const container = document.getElementById("myMap")

            const options = {
                center: new kakao.maps.LatLng(location.latitude, location.longitude),
                level: 3,
            }
           new kakao.maps.Map(container, options)
        })();
    }, []);


    const getUserLocation = async () => {
        const getLocation = () => {
            return new Promise((resolve, reject) => {
                navigator.geolocation.getCurrentPosition(resolve, reject);
            })
        }
        try {
            const result = await getLocation();
            const latitude = result.coords.latitude;   // 위도
            const longitude = result.coords.longitude; // 경도
            return { latitude, longitude }
        }
        catch (error) {
            return { latitude: '37.1634656', longitude: '127.1169024' } // 디폴트
        }
    }

    return (
        <div
            id="myMap"
            style={{
                position: "relative",
                top: "50px",
                left: "100px",
                width: "500px",
                height: "500px",
            }}>
        </div>
    )
}

export default Map

 

 

Kakao 맵 연동 하는 방법은 다음의 카카오 사이트에 자세히 나와있어 여기를 참고하였다.

https://apis.map.kakao.com/

https://apis.map.kakao.com/web/sample/

https://apis.map.kakao.com/web/documentation/