지도/로컬 API에 대한 문의게시판입니다.
안녕하세요
제목처럼 react v16, react-router v4, redux 3을 사용해서 개인적인 프로젝트 진행중에 있습니다
우선 구현하려는 부분은 지도에 클러스터를 생성 후 클릭하여 전체 리스팅 페이지로 이동한 뒤 다시 뒤로가기를 누르면 지도 및 클러스터를 원래대로 원복시켜놓으려고 합니다
여러가지 방법을 고려하다가 결국 기존 react state로 관리되던 것들을 다 redux로 밀어넣고 해당 데이터를 통해 뒤로가기 후 redux에 저장되어있는 데이터를 가지고 다시 다른 컴포넌트들은 원복시키게 되었는데
지도의 중심점이 자꾸 틀어져서 나옵니다.
코드는 기존 angular코드를 react로 포팅하는 작업이여서 매우 크기 때문에 가능하면 말로 설명드리고자 합니다
우선 map 컴포넌트에서 componentWillUnmount에서 지도의 현상태를 저장합니다
componentWillUnmount() {
let {isShowMap} = this.props
if (isShowMap && this.map) {
var position = this.map.getCenter();
const newLat = position.getLat()
const newLng = position.getLng()
const level = this.map.getLevel()
this.props.saveMapState({lat: newLat, lng: newLng, level})
}
}
(this를 쓰는 이유는 이전 작업자가 모든걸 rootScope에 때려넣어서… 귀찮아서 저도 this에 다 때려넣었습니다 ㅠ)
이 값을 저장해두고 다시 mount될 때 최초 페이지 로딩 때 처럼 new daum.maps.Map(container, options)
를 호출해서 지도를 생성합니다
생성시점에 lat lng찍어보면 저장된 값을 잘 넣어주는데 유독 뒤로가기를 통해 이전 페이지로 돌아올 경우 중심지점이 틀어져있습니다. 100%는 아니지만 제가 인자로 넘기는 중앙값이 좌상단 모서리에 위치하는 듯 합니다.
상황을 요약하자면
뒤로가기시 지도를 다시 그릴 때 option에 center값이 지도의 중앙이 아니라 좌상단 모서리에 위치하는 것으로 보입니다
혹시 이 현상에 관해 제가 놓치는 것이 있을까요?
더 필요하신 정보있으시면 알려주세요
감사합니다