maps.js circle 위로 터치시 드래그가 안됩니다

내용 (Description)

circle 만들고 pc에서 그래그는 잘되는데 폰에서 터치로 안움직입니다 map에 drag, draged 이벤트를 넣어놨는데 citcle에도 넣어야 하나요?

환경 (Environment)

safari

OS, OS Version, Browser, Browser Version, Device Information, etc:

추가 정보 (Additional Info)

koronavi.kro.kr/naverMap.html

Site URL, Source Code

Apr 10 '20 10:04 zelkun

안녕하세요. 아래 예제로 테스트 해보았는데요. 정상 동작하였습니다. https://navermaps.github.io/maps.js.ncp/docs/tutorial-1-shape-simple.example.html

폰 모델 / 브라우저 버전 / 확인 가능한 URL / 재현 방법 / 증상을 자세히 부탁드립니다.

Apr 12 '20 13:04 twipixel

안녕하세요. 아래 예제로 테스트 해보았는데요. 정상 동작하였습니다. https://navermaps.github.io/maps.js.ncp/docs/tutorial-1-shape-simple.example.html

폰 모델과 브라우저 버전 체크하신 서비스 URL 확인 가능할까요?

안녕하세요 ios 13.4 입니다 safari는 모르겠네요.. chrome, 80.0.3987.95

맵 drag event를 제거하면 드래그는 잘되는데요, 드래그할때 원도 맵 중앙에서 같이 움직이게 되있습니다 마우스는 잘됩니다..

Apr 12 '20 23:04 zelkun

@zelkun 님 아이폰 / 크롬 버번에서 지도에 써클을 그린 후 서클을 터치해서 드래그 시 드래그가 안된다는 말씀인가요? 오류 내용을 이해 못했습니다 ㅡ,.ㅠ

Apr 13 '20 02:04 twipixel

@zelkun 님 아이폰 / 크롬 버번에서 지도에 써클을 그린 후 서클을 터치해서 드래그 시 드래그가 안된다는 말씀인가요? 오류 내용을 이해 못했습니다 ㅡ,.ㅠ

네, 맵 이동이 안되네요.. 원밖으로 터치시에는 이동이 됩니다 http://koronavi.kro.kr/naverMap.html 에서 확인 가능합니다

http://koronavi.kro.kr/ 구글맵에서는 잘되거든요...

Apr 13 '20 02:04 zelkun

보내주신 URL 에서 필요 소스만 빼서 테스트 할 경우 정상 동작합니다.

var map = new naver.maps.Map('map', {
        center: { lat: 36.350459, lng: 127.384831 },
        zoom: 13
    });

    var circlePoint, circle;

    var drawCircleOnMap = function (pos, radius) {
        if (circlePoint) {
            circlePoint.setMap(null);
        }
        if (circle) {
            circle.setMap(null);
        }

        circlePoint = new naver.maps.Marker({
            position: new naver.maps.LatLng(pos),
            map: map,
            icon: { url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png' },
        });

        circle = new naver.maps.Circle({
            strokeColor: '#8181F7',
            strokeOpacity: 0.3,
            strokeWeight: 1,
            fillColor: '#0101DF',
            fillOpacity: 0.1,
            center: pos,
            clickable: false,
            radius: Number(radius)
        });
        circle.setMap(map);
    };

    drawCircleOnMap({ lat: 36.350459, lng: 127.384831 }, 1000);

    naver.maps.Event.addListener(map, 'click', function (e) {
        // fnCircle();
    });
    naver.maps.Event.addListener(map, 'drag', function (e) {
        /*
         * 폰에서 터치시 드래그가 안됨..
         */
        // fnCircle();
    });
    naver.maps.Event.addListener(map, 'dragend', function (e) {
        // $('#search').click();
    });

Apr 13 '20 08:04 twipixel

보내주신 URL 에서 필요 소스만 빼서 테스트 할 경우 정상 동작합니다.

var map = new naver.maps.Map('map', {
        center: { lat: 36.350459, lng: 127.384831 },
        zoom: 13
    });

    var circlePoint, circle;

    var drawCircleOnMap = function (pos, radius) {
        if (circlePoint) {
            circlePoint.setMap(null);
        }
        if (circle) {
            circle.setMap(null);
        }

        circlePoint = new naver.maps.Marker({
            position: new naver.maps.LatLng(pos),
            map: map,
            icon: { url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png' },
        });

        circle = new naver.maps.Circle({
            strokeColor: '#8181F7',
            strokeOpacity: 0.3,
            strokeWeight: 1,
            fillColor: '#0101DF',
            fillOpacity: 0.1,
            center: pos,
            clickable: false,
            radius: Number(radius)
        });
        circle.setMap(map);
    };

    drawCircleOnMap({ lat: 36.350459, lng: 127.384831 }, 1000);

    naver.maps.Event.addListener(map, 'click', function (e) {
        // fnCircle();
    });
    naver.maps.Event.addListener(map, 'drag', function (e) {
        /*
         * 폰에서 터치시 드래그가 안됨..
         */
        // fnCircle();
    });
    naver.maps.Event.addListener(map, 'dragend', function (e) {
        // $('#search').click();
    });

아래 이벤트 주석을 빼야 합니다..

naver.maps.Event.addListener(map, 'click', function (e) { fnCircle(); }); naver.maps.Event.addListener(map, 'drag', function (e) { /* * 폰에서 터치시 드래그가 안됨.. */ fnCircle(); }); naver.maps.Event.addListener(map, 'dragend', function (e) { $('#search').click(); });

구글맵 시현영상입니다, https://youtu.be/5hHd1rymImQ 원이 맵이랑 같이 움직이게 해놨는데 터치로 드래그 하면 버벅리고 잘안됩니다

안드로이드도 동일하네요, 안드로이드 시현영상(naver map), https://youtu.be/aB_Ql8lCddY drag evnet 가 정상적으로 동작하질 않습니다..

Apr 13 '20 08:04 zelkun

보내주신 URL 에서 필요 소스만 빼서 테스트 할 경우 정상 동작합니다.

var map = new naver.maps.Map('map', {
        center: { lat: 36.350459, lng: 127.384831 },
        zoom: 13
    });

    var circlePoint, circle;

    var drawCircleOnMap = function (pos, radius) {
        if (circlePoint) {
            circlePoint.setMap(null);
        }
        if (circle) {
            circle.setMap(null);
        }

        circlePoint = new naver.maps.Marker({
            position: new naver.maps.LatLng(pos),
            map: map,
            icon: { url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png' },
        });

        circle = new naver.maps.Circle({
            strokeColor: '#8181F7',
            strokeOpacity: 0.3,
            strokeWeight: 1,
            fillColor: '#0101DF',
            fillOpacity: 0.1,
            center: pos,
            clickable: false,
            radius: Number(radius)
        });
        circle.setMap(map);
    };

    drawCircleOnMap({ lat: 36.350459, lng: 127.384831 }, 1000);

    naver.maps.Event.addListener(map, 'click', function (e) {
        // fnCircle();
    });
    naver.maps.Event.addListener(map, 'drag', function (e) {
        /*
         * 폰에서 터치시 드래그가 안됨..
         */
        // fnCircle();
    });
    naver.maps.Event.addListener(map, 'dragend', function (e) {
        // $('#search').click();
    });

아래 이벤트 주석을 빼야 합니다..

naver.maps.Event.addListener(map, 'click', function (e) { fnCircle(); }); naver.maps.Event.addListener(map, 'drag', function (e) { /*

폰에서 터치시 드래그가 안됨.. */ fnCircle(); }); naver.maps.Event.addListener(map, 'dragend', function (e) { $('#search').click(); });

구글맵 시현영상입니다, https://youtu.be/5hHd1rymImQ 원이 맵이랑 같이 움직이게 해놨는데 터치로 드래그 하면 버벅리고 잘안됩니다

안드로이드도 동일하네요, 안드로이드 시현영상(naver map), https://youtu.be/aB_Ql8lCddY drag evnet 가 정상적으로 동작하질 않습니다..

Apr 16 '20 07:04 zelkun

음... 언제까지 기다려야되나요?

Apr 20 '20 03:04 zelkun

@zelkun 님 오래 기다리셨습니다. 코로나로 바쁜 일정이 있어서 이제서야 오류 확인했습니다. 5월 7일 정기배포에 수정되도록 노력하겠습니다. 감사합니다.

Apr 20 '20 05:04 twipixel

@zelkun 님 아래와 같이 해보세요. 드래그 시 매번 Circle 을 생성하여서 dom 객체로 인해 move 이벤트가 발생 안하는 문제로 보입니다.

var map = new naver.maps.Map('map', {
        center: { lat: 36.350459, lng: 127.384831 },
        zoom: 13
    });

    var geoPos = { lat: 36.350459, lng: 127.384831 },
        distance = 1000,
        circlePoint,
        circle;

    var drawCircleOnMap = function (pos, radius) {
        if (!circlePoint) {
            circlePoint = new naver.maps.Marker({
                position: new naver.maps.LatLng(pos),
                map: map,
                icon: { url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png' },
            });
        }
        if (!circle) {
            circle = new naver.maps.Circle({
                strokeColor: '#8181F7',
                strokeOpacity: 0.3,
                strokeWeight: 1,
                fillColor: '#0101DF',
                fillOpacity: 0.1,
                center: pos,
                clickable: false,
                radius: Number(radius)
            });
            circle.setMap(map);
        }

        var position = new naver.maps.LatLng(pos);
        circlePoint.setPosition(position);
        circle.setCenter(position);
    };

    function fnSetParam() {
        geoPos.lat = map.getCenter().lat();
        geoPos.lng = map.getCenter().lng();
    }

    function fnCircle() {
        fnSetParam();
        drawCircleOnMap(geoPos, distance);
    }

    drawCircleOnMap(geoPos, distance);

    naver.maps.Event.addListener(map, 'click', function (e) {
        // fnCircle();
    });
    naver.maps.Event.addListener(map, 'drag', function (e) {
        /*
         * 폰에서 터치시 드래그가 안됨..
         */
        fnCircle();
    });
    naver.maps.Event.addListener(map, 'dragend', function (e) {
        // $('#search').click();
    });

Apr 24 '20 02:04 twipixel

@zelkun 님 아래와 같이 해보세요. 드래그 시 매번 Circle 을 생성하여서 dom 객체로 인해 move 이벤트가 발생 안하는 문제로 보입니다.

var map = new naver.maps.Map('map', {
        center: { lat: 36.350459, lng: 127.384831 },
        zoom: 13
    });

    var geoPos = { lat: 36.350459, lng: 127.384831 },
        distance = 1000,
        circlePoint,
        circle;

    var drawCircleOnMap = function (pos, radius) {
        if (!circlePoint) {
            circlePoint = new naver.maps.Marker({
                position: new naver.maps.LatLng(pos),
                map: map,
                icon: { url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png' },
            });
        }
        if (!circle) {
            circle = new naver.maps.Circle({
                strokeColor: '#8181F7',
                strokeOpacity: 0.3,
                strokeWeight: 1,
                fillColor: '#0101DF',
                fillOpacity: 0.1,
                center: pos,
                clickable: false,
                radius: Number(radius)
            });
            circle.setMap(map);
        }

        var position = new naver.maps.LatLng(pos);
        circlePoint.setPosition(position);
        circle.setCenter(position);
    };

    function fnSetParam() {
        geoPos.lat = map.getCenter().lat();
        geoPos.lng = map.getCenter().lng();
    }

    function fnCircle() {
        fnSetParam();
        drawCircleOnMap(geoPos, distance);
    }

    drawCircleOnMap(geoPos, distance);

    naver.maps.Event.addListener(map, 'click', function (e) {
        // fnCircle();
    });
    naver.maps.Event.addListener(map, 'drag', function (e) {
        /*
         * 폰에서 터치시 드래그가 안됨..
         */
        fnCircle();
    });
    naver.maps.Event.addListener(map, 'dragend', function (e) {
        // $('#search').click();
    });

답변감사합니다

''' setMap(map) 오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다. ''' 맵에서 지우고 새로 그리는 로직이였는데 문제가 되었나보네요 기존 circle을 유지하고 이동하도록 변경하니되네요

Apr 26 '20 12:04 zelkun