3 글 보임 - 1 에서 3 까지 (총 3 중에서)
-
글쓴이글
-
2022년 10월 28일 17:05 #51836
조승엽참가자아래내용 돌려보면 콘솔이 여러개 찍히는데 왜그런건가요? const { naver } = window 가 있던데 저 naver엔 왜 {}이게 쳐있고( {}이거 지우면 작동안되네요 ), window는 왜 있는거에요? 그리고 if (!mapRef.current || !naver) return; 이것도 이해가 안가네요. import React, { useEffect, useRef, useState } from 'react'; import { NaverMap, RenderAfterNavermapsLoaded } from 'react-naver-maps';
function Map(){ let [latitude,setLatitude] = useState(0); let [longitude,setLongitude] = useState(0);
navigator.geolocation.getCurrentPosition(function(pos) { console.log(pos); latitude = setLatitude(pos.coords.latitude); longitude = setLongitude(pos.coords.longitude); // alert("현재 위치는 : " + latitude + ", "+ longitude); });
const mapRef = useRef(null); useEffect(()=>{ const { naver } = window; if (!mapRef.current || !naver) return;
// 지도에 표시할 위치의 위도와 경도 좌표를 파라미터로 넣어줍니다. const location = new naver.maps.LatLng(latitude, longitude); const mapOptions= { center: location, zoom: 17, zoomControl: true, zoomControlOptions: { position: naver.maps.Position.TOP_RIGHT, }, }; const map = new naver.maps.Map(mapRef.current, mapOptions); new naver.maps.Marker({ position: location, map, }); },[Map])
return ( <div ref={mapRef} style={{ height: '70vh' }} /> ); };
export default Map;
2022년 10월 28일 17:59 #51846
조승엽참가자새로고침 눌렸는데 바뀐값이 적용 안되는것 같아서 아래처럼 바꿔봐도 안되네요. promise나 그런걸로 해야하나요?
let [latitude,setLatitude] = useState(0); let [longitude,setLongitude] = useState(0);
const mapRef = useRef(null); useEffect(()=>{ const { naver } = window; if (!mapRef.current || !naver) return;
// 지도에 표시할 위치의 위도와 경도 좌표를 파라미터로 넣어줍니다. const location = new naver.maps.LatLng(latitude, longitude); const mapOptions= { center: location, zoom: 17, zoomControl: true, zoomControlOptions: { position: naver.maps.Position.TOP_RIGHT, }, }; const map = new naver.maps.Map(mapRef.current, mapOptions); new naver.maps.Marker({ position: location, map, });
return()=>{ navigator.geolocation.getCurrentPosition(function(pos) { console.log(pos); setLatitude(pos.coords.latitude); setLongitude(pos.coords.longitude); // alert("현재 위치는 : " + latitude + ", "+ longitude); }); } },[Map])
2022년 10월 28일 20:54 #51851
codingapple키 마스터const { naver } = window 이건 destructuring 문법같은데 오른쪽에 있는 자료를 변수로 빼는것인듯요 if (!mapRef.current || !naver) return 는 !mapRef.current || !naver 인 경우 함수실행 중지하라는 뜻입니다 state변경함수는 다른 코드보다 늦게 처리됩니다
-
글쓴이글
3 글 보임 - 1 에서 3 까지 (총 3 중에서)
- 답변은 로그인 후 가능합니다.