지도에서 마커를 부드럽게 이동 시키기 위해
마커 이미지를 감싸고 있는 상위 엘리먼트에 transition 옵션을 주려고 합니다.
메뉴얼을 찾아봐도 마커에다 elementId 등 셀렉터를 지정 할 수 있는 방법이 없어 보입니다…
혹시 마커 또는 마커의 상위 엘리먼트로 접근 할 수 있는 방법이 있나요?
자답입니다.
현재 플랫폼이 리액트라서 리액트에 맞도록 처리 했습니다만 잘 한건지는 모르겠네요
- 마커가 이동시 트랜지션 효과를 주어서 변경사항을 시각적으로 표현하고자 하였습니다.
- 다음 맵 에서 포인트 ( 마커, 커스텀 오버레이 등 ) 이 움직일때 마커가 직접 움직이는게 아닌, 마커를 랩핑하고 있는 DOM 에 absuolute 포인트가 움직이기 때문에, 부모 접근법이 필요하였습니다.
- 마커 안에서 리액트 상태변경 API 을 사용하고 싶었습니다. ( mobx, state 등 )
방법을 생각하다가 다른 분들도 도움이 되셨으면 하는 마음에 올립니다.
좀 더 좋은 방향으로 리액트스럽게 사용 할 수 있는 방법이 있으신분은 공유부탁드립니다…
다음 지도가 frontend 라이브러리에 맞도록 나왔으면 하는 바램입니다…
class MapMarker extends React.Component {
// 부모노드를 가져오기 위해 ref 를 설정하였습니다.
private wrapperHTML: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>();
// 마커를 저장 할 멤버변수
private myMarker: any = null;
consutructor(props) {
super(props)
this.state = { name: '' }
}
// Props 가 변경 될 때 마커 위치를 변경 해줍니다.
componentWillReceiveProps(nextProps) {
const location = new daum.maps.LatLng(nextProps.latitude, nextProps.longitude);
this.myMarker.setPosition(location);
}
// 컴포넌트가 생성 될 때 마커를 생성합니다.
componentDidMount() {
this. _extendsApplyMapOverlay();
this._addParentApplyStyle();
}
// 컴포넌트가 해제될 때 마커를 제거합니다.
componentWillUnmount() {
this.myMarker.setMap(null);
}
/**
* 커스텀 오버레이 예제를 사용하였습니다.
*/
_extendsApplyMapOverlay = () => {
const { map, latitude, longitude } = this.props;
const _self = this;
this.myMarker = new daum.maps.CustomOverlay({
map: map
clickable: true,
content: _self.wrapperHTML.current, // 마커의 DOM 은 render 메소드에서 가져와야 합니다.
position: new daum.maps.LatLng(latitude, longitude),
xAnchor: 0.5,
yAnchor: 1,
zIndex: 3,
});
// 커스텀 오버레이를 마커라고 규정하고 props 로 전달받은 map 인스턴스 위에 생성하였습니다.
this.myMarker.setMap(map);
};
/**
* 부모노드에 스타일을 부여합니다. 이부분이 .setPosition() 호출 시 부드럽게 이동 하도록 해줍니다.
*/
_addParentApplyStyle = () => {
const n = this.wrapperHTML.current!.parentElement!.style!;
n.transition = 'all .3s';
}
/*
마커를 생성 할 엘리먼트를 만듭니다. 이렇게 하면 state 를 사용 할 수 있습니다.
*/
render() {
return (
<div ref={this.wrapperHTML} style={{ /* other style... */ }}>
<button onClick={() => this.setState({name: 'ziponia'})}>Click!</button>
{this.state.name}
</div>
)
}
}
특정 벤더의 라이브러리를 위해서 지도 API를 맞춰 낼 계획은 없습니다.
지도 라이브러리는 일종의 SDK이며 각 컴포넌트를 분리해서 독립적으로 사용할 수는 있지만
그 컴포넌트의 생명 주기 및 내부 동작 방식은 오로지 지도 API의 구현에 따라 달렸습니다.
지도 API의 컴포넌트를 리액트의 렌더링 라이프 사이클에 맞추는 건 불가능하다고 말씀드리고 싶으며,
질문주신 기능은 CustomOverlay의 Content에 CSS 속성을 주어 구현 가능하니 참고 부탁드립니다.