Leaflet: ios : dragging = false이지만지도에서 스크롤 할 수 없음

이것은 # 4552에서 수정되어야하는 # 4051과 매우 흡사합니다. 이 수정 사항이 지금 작동하지 않는 이유를 살펴 보겠습니다.

예상대로 작동하는 Android 장치에서 바이올린을 시도했으며 드래그 활성화도 예상대로 작동하므로 iOS 특정 버그처럼 보입니다.

http://caniuse.com/#feat = css-touch-action을 살펴보면 iOS는 touch-action 대한 부분적인 지원 만 제공하는 것으로 보이며이 문제의 원인 일 수 있습니다.

연결된 바이올린에서 맵에는 touch-action: pan-x pan-y; 가 있습니다.이 특정 문제에 대한 수정 사항은 iOS 용 touch-action: auto; 를 설정하는 것입니다. 추가 규칙을 추가하는 경우 @oberhamsi 당신은 확인할 수 touch-action: auto 현재 전 (https://github.com/Leaflet/Leaflet/blob/364bc7773568070aad596d58001018b0f0b6bb62/dist/leaflet.css#L54) 수정 당신을위한 문제를? 이 경우 PR을 환영합니다.

슬프게도 도움이되지 않았습니다. touch-action:auto 에 .leaflet-touch-zoom touch-action:auto 을 (를) 설정하도록 바이올린을 업데이트했습니다. 다음 나는 또한 설정 pointer-event:auto 에 .leaflet-tile-container 여전히하지만 효과.

https://jsfiddle.net/geg8yLe3/6/

이벤트 핸들러 중 하나가 preventDefault를 수행 할 수 있습니까?

@oberhamsi 허, 이상합니다.

preventDefault , L.Draggable 가 비활성화되고이 경우 리스너 등록을 취소하므로 드래그 핸들러를 비활성화하면 리스너가 없어야합니다.

@oberhamsi 당신이 이것을 파헤쳐 서 무슨 일이 일어나고 있는지 디버깅을 시도 할 수 있다면

이에 대한 해결책이 있습니까? 여전히이 문제가 있습니다.

@GeorgeColdham 슬프게도, 아닙니다. 마지막 댓글에서 언급했듯이 Android에서 예상대로 작동하기 때문에 테스트 할 iOS 장치에 쉽게 액세스 할 수 없기 때문에 문제가 발생했습니다.

지도 스크롤을 방지하는 iOS에서 트리거되는 CSS 규칙 또는 이벤트 핸들러를 조사해야하므로 이에 대한 도움을 주시면 감사하겠습니다!

나는 같은 문제를 가지고있다. IOS에서 webview를 사용하고 있습니다. 그러나 웹 미리보기 없이도 문제가 발생합니다. 나는 크롬과 사파리에서 테스트했다. 내 기기는 iphone 4s입니다.

안녕하세요,
기본 안드로이드 브라우저 "com.android.browser"로 재현 할 수 있습니다.
사용자 에이전트:
Mozilla/5.0 (Linux; Android 5.0.2; LG-D802/V30f Build/LRX22G) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/34.0.1847.118 Mobile Safari/537.36

Google Maps JS SDK는 iOS / Android에서 제대로 작동하는 동일한 기능을 가지고 있습니다. 내가 볼 수있는 한 터치 동작없이 작동합니다. 어떻게하는지 아십니까?

@perliedman 루트 문제는 touchstart 핸들러의 preventDefault 것 같습니다. https://github.com/Leaflet/Leaflet/blob/v1.0.3/src/map/handler/ Map.Tap.js # L32

제거하면 (또는 옵션에 tap = false 추가) iOS에서 작동합니다. 이 문제는 Android 버전 55 이전의 Chrome에서도 나타납니다 (버전 55는 포인터 이벤트를 지원하고 Leaflet에서 다른 코드 경로를 사용하기 때문에 Chrome). Android 기기에서 chrome : // flags 로 이동하여 포인터 이벤트를 Disabled 설정하면 확인할 수 있습니다.

@herrernst 허, 좋은 분석! 감사!

이것을 일으키는 것은 확실히 탭 핸들러입니다. # 4051에서 사용한 테스트 코드를 보면 실제로 tap: false 있습니다.

따라서 현재 해결 방법은 dragging: false 뿐만 아니라 tap: false 하여 원하는 동작을 달성하는 것입니다.

이 문제를 해결하기 위해 # 5670을 제출 했으므로 시뮬레이트 된 이벤트에 대한 핸들러가없는 한 시뮬레이트 된 이벤트의 소스에 대해 preventDefault 를 사용하지 않습니다.

@perliedman 응답과 패치에 감사드립니다!

이는 Firefox 2의 최신 베타 버전을 사용하여 Android (7.0)에서 재현 할 수 있습니다.

다음 코드는지도가 아닌 한 손가락으로 페이지를 스크롤하는 동시에 두 손가락으로지도를 확대 / 축소 할 수 있고 마커를 탭할 수 있도록하는 유효한 해결 방법 인 것 같습니다. 이렇게하면지도가 스크롤이 필요한 더 큰 페이지의 일부일 때 모바일에서 사용성이 향상됩니다.

L.map('map', {
    dragging: !L.Browser.mobile,
    tap: !L.Browser.mobile
})

iOS 10 Safari 및 Chrome에서 확인되었습니다. 아직 Android에서 완전히 테스트되지 않았습니다.

또한 iOS 11.3.1, Safari 및 Chrome 66 모두에서 작동하는지 확인합니다.
그리고 안드로이드 크롬 66에서

@SimonEast Android의 모바일 FireFox에서 잘 작동하는 것으로

아무도 아직 해결책을 찾지 못했습니까?
dragging & tap 를 false 로 설정했지만 여전히 작동하지 않습니다.

dragging & tap 를 false 로 설정했지만 여전히 작동하지 않습니다.

안녕하세요.
귀하의 경우는 논의 된 것과 다를 수 있습니다. 문제를 재현 할 수 있도록 샘플 바이올린을 제공해주세요.

이것을 일으키는 것은 확실히 탭 핸들러입니다.

그런 다음 # 7026으로 수정할 수 있습니다.

테스트 페이지 : https://jsfiddle.net/johnd0e/8kytb1dc/2/show

그래서 그것은 iOS 특정 버그처럼 보입니다.

그렇지 않다는 것을 확인할 수 있습니다.
이는 Android, Firefox 68.6에서 재현 가능하며 L.Map.Tap 인해 발생하는 것으로 보입니다. 이미보고 된대로.