프론트초보
59
2020-01-14 23:28:40
2
387

리액트 카카오지도띄우기 관련


안녕하세요. 카카오지도api 이용해서 페이지 로딩시 현위치를 띄우는 걸 하고 싶은데 오차 범위가 너무 심하게 나오네요. 무슨 이유일까요 콘솔로 확인해봤을때 현위치 위도 경도를 잘못가져오는거 같은데 해결방안이 있을까요? 소스코드 첨부하겠습니다.

 componentDidMount(){

        let mapContainer = document.getElementById('map'),
            mapOption = {
                center: new kakao.maps.LatLng(33.450701126.570667),
                level: 3
            };
        
        let map = new kakao.maps.Map(mapContainer,mapOption); // 지도를 생성합니다.
        
        // HTML5의 geolocaiton으로 사용할 수 있는지 확인합니다.
        if (navigator.geolocation) {

            // GeoLocation을 이용해서 접속 위치를 얻어옵니다.
            navigator.geolocation.getCurrentPosition(function(position){
                
                var lat = position.coords.latitude// 위도
                    lon = position.coords.longitude// 경도
                    
                var locPostion = new kakao.maps.LatLng(latlon), //마커가 표시될 위치를 geolocation 좌표로 생성합니다.
                    message = '<div style="padding:5px;">여기에 계신가요?!</div>'// 인포윈도우에 표시될 내용입니다.

                // 마커와 인포윈도우를 표시합니다.
                displayMarker(locPostion,message);
            });
        } else {   

        }
        
        // 지도에 마커와 인포윈도우를 표시하는 함수입니다.
        function displayMarker(locPostionmessage) {
            
            // 마커를 생성합니다.
            var marker = new kakao.maps.Marker({
                map: map,
                position: locPostion
            });

            var iwContent = message// 인포윈도우에 표시할 내용
                iwRemoveable = true;
            
            // 인포윈도우를 생성합니다.
            var infowindow = new kakao.maps.InfoWindow({
                content : iwContent,
                removable : iwRemoveable
            });

            // 인포윈도우를 마커위에 표시합니다.
            infowindow.open(map,marker);

            // 지도 중심좌표를 접속위치로 변경합니다.
            map.setCenter(locPostion);
        }


        

    }
    render(){
        return(
            <div id="map" className="Map" style={width : '100%'height:'550px'}}></div>
        );
    }
}
0
0
  • 답변 2

  • 보보8
    839
    2020-01-15 09:51:34 작성 2020-01-15 09:52:00 수정됨

    피씨로 하시나요?

    폰아니고 피씨면 위치오차가 개발환경 문제로 발생하시는것 같습니다.

    코드문제인지 개발환경문제인지 파악하시는게 좋아보여요.

    1
  • 프론트초보
    59
    2020-01-16 13:05:22

    감사합니다

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.