react에서 daum map api 사용중, 질문드립니다.

Question

아래와 같은 에러가 발생하였습니다.Maps.js:55 Uncaught TypeError: Cannot read property 'displayMarker' of nullconsole을 이용해 문제의 부분을 찾고자 해보았는데요.결국, 위의 에러처럼 displayMarker가 null인것 같습니다.왜 null인걸까요 ㅠㅠ == console 확인 결과 ==HTML5의 geolocation으로 사용할 수 있는지 확인합니다Maps.js:46 GeoLocation을 이용해서 접속 위치를 얻어옵니다Maps.js:50 37.4449168.127.13886839999999Maps.js:53 locPosition : (37.4449168, 127.13886839999999) message :

여기에 계신가요?!

Maps.js:54 마커와 인포윈도우를 표시합니다===================아래는 코딩 부분입니다.import React from 'react'; var map, el; class Maps extends React.Component{ componentDidMount(){ console.log(1); el = document.getElementById('map'); map = new window.daum.maps.Map(el,{ center : new window.daum.maps.LatLng(37.497954,127.027046), level : 8 }); this.reRenderingForLoginUser(); }; // 지도에 마커와 인포윈도우를 표시하는 함수입니다 displayMarker(locPosition, message) { console.log('마커를 생성합니다'); let marker = new window.daum.maps.Marker({ map: map, position: locPosition }); let iwContent = message, // 인포윈도우에 표시할 내용 iwRemoveable = true; console.log('인포윈도우를 생성합니다'); let infowindow = new window.daum.maps.InfoWindow({ content : iwContent, removable : iwRemoveable }); console.log('인포윈도우를 마커위에 표시합니다'); infowindow.open(map, marker); console.log('지도 중심좌표를 접속위치로 변경합니다'); map.setCenter(locPosition); }; reRenderingForTimer(){ }; reRenderingForLoginUser(){ console.log('HTML5의 geolocation으로 사용할 수 있는지 확인합니다'); if (navigator.geolocation) { console.log('GeoLocation을 이용해서 접속 위치를 얻어옵니다'); navigator.geolocation.getCurrentPosition(function(position) { let lat = position.coords.latitude, // 위도 lon = position.coords.longitude; // 경도 console.log(lat+'.'+lon); let locPosition = new window.daum.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다 message = '

여기에 계신가요?!

'; // 인포윈도우에 표시될 내용입니다 console.log('locPosition : '+locPosition+' message : '+message); console.log('마커와 인포윈도우를 표시합니다'); this.displayMarker(locPosition, message); }); } else { console.log('HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다'); let locPosition = new window.daum.maps.LatLng(37.497954,127.027046), message = 'geolocation을 사용할수 없어요..' console.log('fail'); this.displayMarker(locPosition, message); } }; render(){ var mapStyle = { width:'100%', height:'700px', overflow:'hidden', }; return(

); }; }; export default Maps;

니플 · Answer

console.log는 제대로 찍히나요?

니플 · Answer

daum api가 잘 불러와 지는 것인지 확인해보세요 ㅎㅎ

websterking · Answer

맵 띄우기까지는 완료하였고, 접속자의 위치를 마커로 표시하는 부분을 진행중입니다.(componentDidMount에서 reRenderingForLoginUser함수를 호출하지 않으면 맵이 정상적으로 나타납니다. 맵위에 마커 표시를 하고자 reRenderingForLoginUser를 호출하면 지금과 같은 에러가 발생합니다.)현재의 상황은 다음과 같습니다... ㅠimport React from 'react'; class Maps extends React.Component{ constructor(props){ super(props); this.state = { el : '', map : '' }; console.log('Done constructor'); }; componentDidMount(){ let el = document.getElementById('map'); let map = new window.daum.maps.Map(el,{ center : new window.daum.maps.LatLng(37.497954,127.027046), level : 8 }); this.setState({ el : el, map : map }); this.reRenderingForLoginUser(); console.log('Done componentDidMount'); }; displayMarker(locPosition, message) { let map = this.state.map; console.log('마커를 생성합니다'); let marker = new window.daum.maps.Marker({ map: map, position: locPosition }); let iwContent = message, // 인포윈도우에 표시할 내용 iwRemoveable = true; console.log('인포윈도우를 생성합니다'); let infowindow = new window.daum.maps.InfoWindow({ content : iwContent, removable : iwRemoveable }); console.log('인포윈도우를 마커위에 표시합니다'); infowindow.open(map, marker); console.log('지도 중심좌표를 접속위치로 변경합니다'); map.setCenter(locPosition); console.log('Done displayMarker'); }; reRenderingForTimer(){ }; reRenderingForLoginUser(){ console.log('HTML5의 geolocation으로 사용할 수 있는지 확인합니다'); if (navigator.geolocation) { console.log('GeoLocation을 이용해서 접속 위치를 얻어옵니다'); navigator.geolocation.getCurrentPosition(function(position) { let lat = position.coords.latitude, // 위도 lon = position.coords.longitude; // 경도 console.log(lat+'.'+lon); let locPosition = new window.daum.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다 message = '

여기에 계신가요?!

'; // 인포윈도우에 표시될 내용입니다 console.log('locPosition : '+locPosition+' message : '+message); console.log('마커와 인포윈도우를 표시합니다'); this.displayMarker(locPosition, message); }); } else { console.log('HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다'); let locPosition = new window.daum.maps.LatLng(37.497954,127.027046), message = 'geolocation을 사용할수 없어요..' this.displayMarker(locPosition, message); console.log('fail'); } console.log('Done reRenderingForLoginUser'); }; render(){ var mapStyle = { width:'100%', height:'700px', overflow:'hidden', }; return(

가나다라

); }; }; export default Maps;

니플 · Answer

Maps를 불러오는 default 페이지도 보여줄 수 있으신가요?

websterking · Answer

아래처럼 간단하게 작성하였습니다..ㅎㅎ import React from 'react'; import Maps from '../containers/Maps'; class Body extends React.Component{ render(){ return(

); } }; export default Body; App.js에서 Header와 Body부분을 합칩니다. import React, { Component } from 'react'; import Header from './components/Header'; import Body from './components/Body'; import './App.css'; class App extends Component { render() { return (

{this.props.children}

); } } export default App;

websterking · Answer

에러의 원인을 찾은것같습니다.(해결은 못했지만) if (navigator.geolocation) { console.log('GeoLocation을 이용해서 접속 위치를 얻어옵니다'); navigator.geolocation.getCurrentPosition(function(position) { let lat = position.coords.latitude, // 위도 lon = position.coords.longitude; // 경도 let locPosition = new window.daum.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다 message = '

여기에 계신가요?!

'; // 인포윈도우에 표시될 내용입니다 this.displayMarker(locPosition, message); }); }이 부분에서 this.displayMarker의 this가 가리키는 주체가 잘못된것같아요Maps가 아닌 function을 가리키고 있는것같네요!이제 해결할 차례입니다..하하

니플 · Answer

그게 맞아요ㅎㅎ아무리 봐도 라이브러리를 못 불러와서 그런것같은데 window.daum.maps.Map을 콘솔에 찍어보실래요?

websterking · Answer

다음과 같이 콘솔에 찍어보았습니다. reRenderingForLoginUser(){ console.log('HTML5의 geolocation으로 사용할 수 있는지 확인합니다'); if (navigator.geolocation) { console.log('GeoLocation을 이용해서 접속 위치를 얻어옵니다'); console.log("this_1 : "+this); console.log("map_1 : "+window.daum.maps.Map); navigator.geolocation.getCurrentPosition(function(position) { console.log("this_2 : "+this); console.log("map_2 : "+window.daum.maps.Map); let lat = position.coords.latitude, // 위도 lon = position.coords.longitude; // 경도 let locPosition = new window.daum.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다 message = '

여기에 계신가요?!

'; // 인포윈도우에 표시될 내용입니다 window.Maps.displayMarker(locPosition, message).bind(Maps); }); } else { console.log('HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다'); let locPosition = new window.daum.maps.LatLng(37.497954,127.027046), message = 'geolocation을 사용할수 없어요..' this.displayMarker(locPosition, message); console.log('fail'); } console.log('Done reRenderingForLoginUser'); };결과는 아래와 같이 나왔습니다..라이브러리는 불러온것같아요! 아마..

니플 · Answer

이해가 안되는 것이위 소스에서 displayMarker를 선언했는데왜 없다고 나올까요?ㅎㅎ

websterking · Answer

제가 지금 코드에서 사용하고 있는 this 사이에 위와 같은 차이가 있더라고요!this의 대상을 명확히 구분하여 적용해야 할것같은데, 어렵네요 ㅠbind/call을 해주어야 한다..이런글도 잇고요

react에서 daum map api 사용중, 질문드립니다.

10개의 답변

Q&A 목록