7. 위도, 경도 불러오기

※ 현재 위치의 위도와 경도를 가져옴, Weather 모듈 추가

  -navigator.geolocation.getCurrentPosition 함수로 사용자의 현재 위치를 요청

 

componenet

  -Input.jsx

  -Button.jsx

module

  -Login.jsx

  -Clock.jsx

  -Weather.jsx

page

  -ChromeApp.jsx

css

  -List.css

img

  -1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg

 

module - <Weather.jsx> : 사용자의 현재 위치를 요청

import React, {useEffect} from 'react'

function Weather() {
  const getLocation = position => {
    const lat = position.coords.latitude //위도 지정
    const lng = position.coords.longitude //경도 지정
    console.log(lat, lng) //위도, 경도를 콘솔 창에 보여줌
  }

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(getLocation) //사용자의 현재 위치를 요청
  })

  return <div></div>
}

export default Weather

 

App.js

import React from 'react'
import Weather from './module/Weather'

function App() {
  return (
    <div>
      <Weather />
    </div>
  )
}

export default App

 

 현재 내 위치에 위도, 경도 출력