지도에서 드래그 관련 문의

지도/로컬 API
#1

지도에서 마커들을 드래그에서 다중 선택하는 기능을 구현하고 싶습니다.

현재 지도에서 클릭한 후 드래그 했을 시 지도 화면이 움직이는데

Ctrl 키를 누른 상태 또는 Shift키를 누른 상태에서 클릭한 후 드래그 했을 시

사각형이 만들어지면서 마우스 클릭을 떼면 사각형이 사라지면서

좌표값을 가져오고 싶습니다.

가능할지 문의 드립니다.

#2

현재 제공하고 있는 API의 이벤트만으로는 구현이 불가능하며
상태 관리는 global로, 이벤트 처리는 DOM API로 따로 하셔야 합니다.

크로스 브라우징과 이벤트 예외 처리는 따로 해주세요.

var mapElement = document.getElementById('map');
var map = new daum.maps.Map(mapElement, {
	center: new daum.maps.LatLng(37.53149785539796, 127.00536722695159),
	mapTypeId: daum.maps.MapTypeId.ROADMAP,
	level: 5
});
var proj = map.getProjection();
var locked = false;
var rect = new daum.maps.Rectangle({
    fillColor: '#ff0000',
    fillOpacity: 0.3
});

var sLatLng, eLatLng, bounds;

mapElement.addEventListener('mousedown', function(e) {

    if (!e.ctrlKey) {
        return;
    }

    locked = true;
    map.setDraggable(false);

    var point = new daum.maps.Point(e.clientX, e.clientY);
    sLatLng = proj.coordsFromContainerPoint(point);

    rect.setMap(map);
});

mapElement.addEventListener('mousemove', function(e) {

    if (!locked) {
         return;
    }

    var point = new daum.maps.Point(e.clientX, e.clientY);
    eLatLng = proj.coordsFromContainerPoint(point);

    bounds = new daum.maps.LatLngBounds(sLatLng, eLatLng); 
    rect.setBounds(bounds);
});

mapElement.addEventListener('mouseup', function(e) {

    locked = false;
    map.setDraggable(true);
    rect.setMap(null);

    // these are what you want to know.
    console.log(bounds, sLatLng, eLatLng);
});
1개의 좋아요
#3

답변해주셔서 정말 감사합니다.