지도/로컬 API에 대한 문의게시판입니다.
React에서 다음 map api를 활용하고자 하는데요.
위 링크에 공개된 map 기본 api를 적용하려면 react에서 어떤식으로 사용해야 할까요?
너무나 간단한것인데 처음이라 어렵네요.
가능하면 자세한 답변 부탁드립니다.
가장 쉬운 방법은
script 로딩 이후에
window.daum.maps.XXX 로 접근하여 사용하는 방식이 있습니다.
만약 eslint에 걸려서 컴파일이 실패하는 경우
daum.maps 네임스페이스에 접근하는 js 파일 시작에
/*global daum*/
을 적으면 컴파일이 될 겁니다.
이 외에도 여러 방법이 있을 수 있으니 참고만 해 주세요.
만약 지도 객체들을 React Component로 만들어서 동적으로 무엇인가 하려고 한다면
그와 관련된 컴포넌트들은 직접 만드셔야 합니다.
좀더 자세한 예시를 들어주실수 있나요?
render(){
var mapStyle = {
width:‘100%’,
height:‘600px’,
overflow:‘hidden’,
};
var container = document.getElementById(‘map’);
var options = {
center: new window.daum.maps.LatLng(33.450701, 126.570667),
level: 3
};
var map = new window.daum.maps.Map(container, options);
return(
);
};
와 같이 window를 이용하엿더니 기존의 'daum’을 인식하지 못하는 에러는 해결되었는데요,
Uncaught TypeError: Cannot read property ‘currentStyle’ of null
이라는 에러가 발생했네요…
원론으로 돌아가, 첫 질문에 대한 자세한 예시좀 부탁드릴게요!
처음 react를 접해보는거라 어렵네요…
2개의 좋아요
아마도 render() 함수에서 id="map" 인 엘리먼트를 jsx 문법으로 작성하여 렌더링 하고 있는 것으로 추측되는데요,
render() 함수 내부에서 생성(return)도 되지 않은 엘리먼트를 접근하려고 하기 때문에
document.getElementById("map") 은 null 값을 리턴할 것이고 container 변수에는 null이 할당되어 지도를 제대로 생성하지 못하고 있는 것이죠.
흐음… 만약 단순한 지도 뷰잉이 필요하다면
저는 아래와 같이 쓸 겁니다.
/*global daum*/
import React, { Component } from 'react';
import './App.css';
class App extends Component {
componentDidMount() {
let el = document.getElementById('map');
let map = new daum.maps.Map(el, {
center: new daum.maps.LatLng(/* latitude */, /* longitude */)
});
}
render() {
return (
<div className="App" id="map"></div>
);
}
}
export default App;
리액트에서는 component, 그러니까 현재 클래스의 render가 실행되고 난 이후에 수행되는 이벤트 함수로 componentDidMount 를 제공하고 있는데
이 부분에 지도 코드를 구현하는 것이죠.
2개의 좋아요
아참! 그리고 더 자세한 코드는 제공해 드리지 않습니다.
위는 리액트 + 다음지도 사용자를 위한 레퍼런스용 답변으로 사용하기 위해 작성된 내용이라 의도적으로
상세 코드를 적었지만 원래 이렇게 직접 코드는 적어드리지 않습니다.
개인적으로는 구체적인 코드가 오가는 게 명확하고 깔끔하긴 하지만
질문자/답변자 모두에게 영양가가 없는 일이라고 생각하고 있거든요. ㅎㅎ
1개의 좋아요
감사합니다 충분한 답변이 되었습니다.
두더지님 오늘도 좋은하루 되세요. 감사합니다.
1개의 좋아요
두더지님! 저도 헤매고 있던 부분인데 명확히 설명해주셔서 정말 감사드립니다!
새해에도 좋은 일만 가득하세요!!
1개의 좋아요
안녕하세요 리액트 공부 중 여쭤보고 싶은게 있어 질문 드립니다.
현재 올려주신 코드에서 map 변수에 정보만 담기고 출력은 안되고 있는 상태이지 않나요?
map에 담긴 정보를 지도로 출력하려면 어찌 해야할까요?
초보자여서 죄송합니다 ㅠ
만약 저 코드로 지도가 보이지 않는 상황이라면 CSS를 살펴보세요.
#map 으로 할당된 엘리먼트의 width/height가 지정되어 있어야만 보입니다.