[javascript] Ctrl + Scroll to Zoom Google지도 비활성화

아무도 CTRL+ 를 비활성화하는 방법을 알고 Scroll있습니까?

먼저 마우스 휠을 움직이면지도가 확대 / 축소됩니다. 그러나 이제는 CTRL+ 마우스 휠 스크롤을 눌러 확대 / 축소 하도록 요청합니다 .

이 기능을 어떻게 비활성화합니까? 문서에서 아무것도 찾을 수없는 것 같습니다.

https://developers.google.com/maps/documentation/javascript/controls#ControlOptions

답변

gestureHandling: 'greedy'지도 옵션 으로 전달 해야합니다.

문서 : https://developers.google.com/maps/documentation/javascript/interaction#gestureHandling

예를 들면 :

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  gestureHandling: 'greedy'
});

최신 정보! Google지도부터 3.35.6속성을 옵션 래퍼로 묶어야합니다.

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  options: {
    gestureHandling: 'greedy'
  }
});

ealfonso새로운 정보에 감사드립니다

답변

스크롤 확대 / 축소를 완전히 비활성화해도 괜찮다면 scrollwheel: false. 확대 / 축소 컨트롤 ( zoomControl: true) 을 제공하는 경우 사용자는 확대 / 축소 버튼을 클릭하여지도를 계속 확대 할 수 있습니다 .

문서 :
https://developers.google.com/maps/documentation/javascript/reference(“scrollwheel
“에 대한 페이지 검색)

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  scrollwheel: false,
  zoomControl: true
});

답변

오버레이 만 숨기고 싶지만 스크롤 및 확대 / 축소 기능을 비활성화하려는 경우 (이전처럼) CSS를 사용하여 오버레이를 숨길 수 있습니다.

.gm-style-pbc {
opacity: 0 !important;
}

이렇게하면 모바일에서도 숨겨 지므로 다음과 같이 사용하여 “지도를 이동하려면 두 손가락 사용”을 표시 할 수 있습니다.

@media only screen and ( min-width: 980px ) {
.gm-style-pbc {
opacity: 0 !important;
}
}

답변

속성 gestureHandling내 중첩은 options버전 “3.35.6”에서 저에게 효과적이었습니다.

map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        options:{
            gestureHandling: 'greedy'
        }
    });

답변

gestureHandling: 'greedy'지도 위에 오버레이가 있었기 때문에 수정 사항을 적용 할 수 없었습니다. 결국 mousewheel이벤트 를 감지 하고 ctrl속성을 true로 설정했습니다 .

// Load maps and attach event listener to scroll event.
var $map = $('.map');
$map[0].addEventListener('wheel', wheelEvent, true);

function wheelEvent(event) {
    // Set the ctrlKey property to true to avoid having to press ctrl to zoom in/out.
    Object.defineProperty(event, 'ctrlKey', { value: true });
}