Custom Control 기능 구현

jeenhyung commented 4 years ago

네이버 지도 공식문서에 보면 아래와 같이 CustomControl을 사용해 지도에 버튼을 띄워서 클릭 시 설정된 위치로 이동하는 기능을 소개합니다.

var locationBtnHtml = '<a href="#" class="btn_mylct"><span class="spr_trff spr_ico_mylct">NAVER 그린팩토리</span></a>';
var map = new naver.maps.Map('map', {zoom: 13});

naver.maps.Event.once(map, 'init_stylemap', function() {
    //customControl 객체 이용하기
    var customControl = new naver.maps.CustomControl(locationBtnHtml, {
        position: naver.maps.Position.TOP_LEFT
    });

    customControl.setMap(map);

    naver.maps.Event.addDOMListener(customControl.getElement(), 'click', function() {
        map.setCenter(new naver.maps.LatLng(37.3595953, 127.1053971));
    });

    //Map 객체의 controls 활용하기
    var $locationBtn = $(locationBtnHtml),
        locationBtnEl = $locationBtn[0];

    map.controls[naver.maps.Position.LEFT_CENTER].push(locationBtnEl);

    naver.maps.Event.addDOMListener(locationBtnEl, 'click', function() {
        map.setCenter(new naver.maps.LatLng(37.3595953, 127.1553971));
    });
});

위의 코드를 활용하여 내위치가기 버튼을 지도에 띄울려고하는데, 해당 라이브러리에서 사용을 어떻게 하는지 찾다가 막혀서 질문을 남깁니다. 혹시 가능하다면 방법을 알려주시면 감사하겠습니다!

zeakd commented 4 years ago

라이브러리에 관심가져주시고 이슈 남겨주셔서 감사합니다. 해당 기능은 아직 미구현으로 이슈로 등록해두도록 하겠습니다 😄

zeakd commented 1 year ago

v0.1 에서 Custom을 쉽게 할 수 있도록 업데이트 되었습니다. 사용자 정의 컨트롤 만들기 Example 을 참고해주세요 https://zeakd.github.io/react-naver-maps/examples/control-tutorial-4-custom-p1/

zeakd / react-naver-maps

Custom Control 기능 구현 #34