Google Maps API로 마우스 스크롤 휠 크기 조정을 비활성화하는 방법

560

Google Maps API (v3)를 사용하여 페이지에 몇 개의지도를 그립니다. 내가하고 싶은 한 가지는 마우스 휠을지도 위로 스크롤 할 때 확대 / 축소를 비활성화하는 것입니다. 그러나 어떻게하는지 잘 모르겠습니다.

scaleControl을 비활성화했지만 (예 : 스케일링 UI 요소 제거) 스크롤 휠 스케일링을 방해하지는 않습니다.

다음은 내 기능의 일부입니다 (간단한 jQuery 플러그인입니다).

$.fn.showMap = function(options, addr){
  options = $.extend({
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }, options);
  var map = new google.maps.Map(document.getElementById($(this).attr('id')), options);

  // Code cut from this example as not relevant
};
jquery  google-maps  google-maps-api-3  jquery-plugins 
— aaronrussell
소스
1
안녕하세요. 멋진 버튼으로지도를 잠 그거나 잠금을 해제 할 수있는보다 개발 된 플러그인을 만들었습니다. 또한 jQuery 플러그인입니다. github.com/diazemiliano/googlemaps-scrollprevent 에서 확인할 수 있습니다 .
— Emiliano Díaz
— Peter Mortensen

답변:

986

Maps API 버전 3에서는 MapOptions 속성 scrollwheel내에서 옵션을 false로 설정하기 만하면됩니다 .

options = $.extend({
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);

Maps API 버전 2를 사용하는 경우 다음과 같이 disableScrollWheelZoom () API 호출 을 사용해야했습니다 .

map.disableScrollWheelZoom();

scrollwheel줌은지도 API 버전 3에서 기본적으로 사용하지만, 명시 적으로 활성화하지 않는 한 버전 2에서 사용할 수 없습니다되는 enableScrollWheelZoom()API 호출.

— 다니엘 바 살로
소스
40
+1 참고 : disableDefaultUI: true교체 가능navigationControl: false, mapTypeControl: false, scaleControl: false
— Jordan Arseno
1
나에게 꼭 필요한 것은 mapTypeId가 없으면 다른 매개 변수는 무시된다는 것입니다.
— Michael Hunter
이것은 나를 위해 작동하지만 페이지의 모달 내부에서 스크롤 휠을 비활성화하면 이상한 부작용이 있습니다. 모달 컨텐츠에 맵이없고 커서가 맵 위에 없습니다.
— regularmike
슬프게도 이것은 스크롤 휠을 넣을 때 StreetViewPanorama Map에서 예상대로 작동하지 않습니다.
— Solomon Closson
Daniel,이 질문에 대한 답변을 도와주세요. stackoverflow.com/questions/60544486/…
— Xavier Issac
103

Daniel의 코드 가 작업을 수행합니다 (힙 감사합니다). 그러나 줌을 완전히 비활성화하고 싶었습니다. 나는 네 가지 옵션을 모두 사용해야한다는 것을 알았습니다.

{
  zoom: 14,                        // Set the zoom level manually
  zoomControl: false,
  scaleControl: false,
  scrollwheel: false,
  disableDoubleClickZoom: true,
  ...
}

참고 : MapOptions 객체 사양

— 사이먼 이스트
소스
2
여전히 당신을 위해 작동합니까? 스크롤 휠을 무시하기 위해 현재 버전의 v3 (3.9를 믿습니다)을 얻을 수 없었고 맵 객체의 모든 자식을 반복하고 맵으로의 전파를 중단해야했습니다.
— c.apolzon
응, 고마워! 또한 모든 기본지도 컨트롤 위젯을 제거하려면 확대 / 축소, 회전 및 이동 컨트롤을 개별적으로 끄는 대신 disableDefaultUIUI를 실행하면됩니다.
— thomax
33
대문자 사용에주의하십시오. scrollwheel모두 소문자 여야합니다 (W를 폭로하여 나를 잡았습니다)
— kez
1
스크롤 휠 : 내가 필요한 전부 거짓
— mindore
30

이 작업을 동적으로 수행하려는 경우를 대비하여;

function enableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: true });
}

function disableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: false });
}

때때로지도 위에 "복잡한"것을 보여 주어야합니다 (또는지도가 레이아웃의 작은 부분 임).

— 펠리페 페레이라
소스
3
초기화시이 코드를 추가 할 수 있습니다. map.addListener ( 'click', function () {if (map) map.setOptions ({scrollwheel : true});}); map.addListener ( 'mouseout', function () {if (map) map.setOptions ({스크롤 휠 : false});});
— 우주인
Google지도 코드 외부에서지도 스크롤 휠 기능을 조사하고 싶을 때 유용합니다. 즉 내 자신의 jquery 코드 내부에서.
— lharby
26

간단하게 유지하십시오! 원래 Google은 변수가 있지만 추가 항목은 없습니다.

 var mapOptions = {
     zoom: 16,
     center: myLatlng,
     scrollwheel: false

}
— Creatif_IV
소스
10

현재 (2017 년 10 월) Google은이라는 확대 / 스크롤을 처리하기 위해 특정 속성을 구현했습니다 gestureHandling. 그 목적은 모바일 장치 작동을 처리하는 것이지만 데스크톱 브라우저의 동작도 수정합니다. 여기 공식 문서가 있습니다 .

function initMap() {
  var locationRio = {lat: -22.915, lng: -43.197};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: locationRio,
    gestureHandling: 'none'
});

gestureHandling에 사용 가능한 값은 다음과 같습니다.

  • 'greedy': 사용자가 화면을 스 와이프 (드래그)하면 맵이 항상 이동합니다 (위 또는 아래, 왼쪽 또는 오른쪽). 즉, 한 손가락 스 와이프와 두 손가락 스 와이프로 인해지도가 이동합니다.
  • 'cooperative': 사용자가 한 손가락으로 스 와이프하여 페이지를 스크롤하고 두 손가락으로지도를 이동해야합니다. 사용자가 한 손가락으로지도를 스 와이프하면지도에 오버레이를 표시하고 두 손가락을 사용하여지도를 이동하라는 메시지가 표시됩니다. 데스크톱 애플리케이션에서 사용자는 수정 자 키 (ctrl 또는 ⌘ 키)를 누른 상태에서 스크롤하여 맵을 확대 / 축소 또는 이동시킬 수 있습니다.
  • 'none':이 옵션은 휴대 기기 용지도에서 이동 및 집기 기능을 비활성화하고 데스크톱 기기에서지도를 드래그 할 수 없도록합니다.
  • 'auto'(기본값) : 페이지를 스크롤 할 수 있는지 여부에 따라 Google Maps JavaScript API는 gestureHandling 속성을 'cooperative'또는'greedy'

즉, 설정을 "항상 확대 / 축소 가능 "( 'greedy'), "확대 'none'/ 축소 불가"( ) 또는 "사용자가 CRTL / ⌘를 눌러 확대 / 축소를 사용하도록 설정"( 'cooperative')으로 쉽게 설정할 수 있습니다.

— 업
소스
7

멋진 버튼으로지도를 잠 그거나 잠금 해제 할 수있는보다 개발 된 jQuery 플러그인을 만들었습니다.

이 플러그인은 투명한 오버레이 div로 Google Maps iframe을 사용 중지하고 잠금 해제 버튼을 추가합니다. 잠금을 해제하려면 650 밀리 초 동안 눌러야합니다.

편의를 위해 모든 옵션을 변경할 수 있습니다. https://github.com/diazemiliano/googlemaps-scrollprevent 에서 확인 하십시오.

몇 가지 예가 있습니다.

(function() {
  $(function() {
    $("#btn-start").click(function() {
      $("iframe[src*='google.com/maps']").scrollprevent({
        printLog: true
      }).start();
      return $("#btn-stop").click(function() {
        return $("iframe[src*='google.com/maps']").scrollprevent().stop();
      });
    });
    return $("#btn-start").trigger("click");
  });
}).call(this);
.embed-container {
  position: relative !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
}
.embed-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.mapscroll-wrap {
  position: static !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/diazemiliano/googlemaps-scrollprevent/v.0.6.5/dist/googlemaps-scrollprevent.min.js"></script>
<div class="embed-container">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.746318586604!2d-71.64614110000001!3d-40.76341959999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9610bf42e48faa93%3A0x205ebc786470b636!2sVilla+la+Angostura%2C+Neuqu%C3%A9n!5e0!3m2!1ses-419!2sar!4v1425058155802"
  width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>
<p><a id="btn-start" href="#">"Start Scroll Prevent"</a>  <a id="btn-stop" href="#">"Stop Scroll Prevent"</a>
</p>
스 니펫 확장

— 에밀리아 노 디아즈
소스
멋진 플러그인이지만 iframe을 사용하는 대신 JS API로 Google 맵을 만들 때 어떻게 사용합니까?
— ikkez
2
" Edit in JSFiddle Result JavaScript HTML CSS"이 코드의 일부입니까?
— Peter Mortensen
6

필자의 경우 중요한 것은 'scrollwheel':falseinit 으로 설정하는 것이 었습니다 . 통지 : 사용하고 jQuery UI Map있습니다. 다음은 CoffeeScript init 함수 제목입니다.

 $("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) ->
— andilabs
소스
6

GMaps.js 라이브러리를 사용하는 경우 지오 코딩 및 커스텀 핀과 같은 작업을 조금 더 간단하게 수행 할 수 있습니다. 이전 답변에서 배운 기술을 사용하여이 문제를 해결하는 방법은 다음과 같습니다.

var Gmap = new GMaps({
  div: '#main-map', // FYI, this setting property used to be 'el'. It didn't need the '#' in older versions
  lat: 51.044308,
  lng: -114.0630914,
  zoom: 15
});

// To access the Native Google Maps object use the .map property
if(Gmap.map) {
  // Disabling mouse wheel scroll zooming
  Gmap.map.setOptions({ scrollwheel: false });
}
— racl101
소스
4

Javascript Google Map API 를 사용 중지하는 방법을 궁금해하는 사람

지도를 한 번 클릭하면 확대 / 축소 스크롤 이 활성화 됩니다. 그리고 비활성화 마우스 후 사업부를 종료합니다.

여기 몇 가지 예가 있습니다 

var map;
var element = document.getElementById('map-canvas');
function initMaps() {
  map = new google.maps.Map(element , {
    zoom: 17,
    scrollwheel: false,
    center: {
      lat: parseFloat(-33.915916),
      lng: parseFloat(151.147159)
    },
  });
}


//START IMPORTANT part
//disable scrolling on a map (smoother UX)
jQuery('.map-container').on("mouseleave", function(){
  map.setOptions({ scrollwheel: false });
});
jQuery('.map-container').on("mousedown", function() {
  map.setOptions({ scrollwheel: true });
});
//END IMPORTANT part
.big-placeholder {
  background-color: #1da261;
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
      <div class="big-placeholder">
      </div>
      
      
      <!-- START IMPORTANT part -->
      <div class="map-container">
        <div id="map-canvas" style="min-height: 400px;"></div>  
      </div>
      <!-- END IMPORTANT part-->
      
      
      
      <div class="big-placeholder">
      </div>
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIjN23OujC_NdFfvX4_AuoGBbkx7aHMf0&callback=initMaps">
      </script>
  </body>
</html>
스 니펫 확장

— 앨버트
소스
3

간단한 해결책 :

// DISABLE MOUSE SCROLL IN MAPS
// enable the pointer events only on click;
$('.gmap-wrapper').on('click', function () {
  $('.gmap-wrapper iframe').removeClass('scrolloff'); // set the pointer events true on click
});
// you want to disable pointer events when the mouse leave the canvas area;
$(".gmap-wrapper").mouseleave(function () {
  $('.gmap-wrapper iframe').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
});
.scrolloff{ pointer-events: none; }
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gmap-wrapper">
<iframe class="scrolloff" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d44754.55736493158!2d9.151166379101554!3d45.486726!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786bfca7e8fb1cb%3A0xee8d99c9d153be98!2sCorsidia!5e0!3m2!1sit!2sit!4v1496947992608" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</html>
스 니펫 확장

출처 : https://github.com/Corsidia/scrolloff

— 다메
소스
2

누군가가 순수한 CSS 솔루션에 관심이 있다면. 다음 코드는지도 ​​위에 투명 div를 오버레이하고 클릭하면 투명 div를지도 뒤로 이동합니다. 오버레이는 한 번 클릭 한 후지도 뒤에서 확대 / 축소를 방지합니다.

내 블로그 게시물 Google지도가 작동하는 방식에 대한 설명 은 CSS 를 사용하여 줌 확대 / 축소 를, 작업 데모는 pen codepen.io/daveybrown/pen/yVryMr 을 참조하십시오.

면책 조항 : 이것은 주로 학습용이며 프로덕션 웹 사이트에 가장 적합한 솔루션은 아닙니다.

HTML : 

<div class="map-wrap small-11 medium-8 small-centered columns">
    <input id="map-input" type="checkbox" />
    <label class="map-overlay" for="map-input" class="label" onclick=""></label>
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19867.208601651986!2d-0.17101002911118332!3d51.50585742500925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1482355389969"></iframe>
</div>

CSS :

.map-wrap {
    position: relative;
    overflow: hidden;
    height: 180px;
    margin-bottom: 10px;
}

#map-input {
    opacity: 0;
}

.map-overlay {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    z-index: 2;    
}

#map-input[type=checkbox]:checked ~ iframe {
    z-index: 3;
}

#map-input[type=checkbox]:checked ~ .map-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}


iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    border: none;
}
— 데비
소스
0

해당 코드를 사용하면 Google지도의 모든 색상 및 확대 / 축소 컨트롤이 제공됩니다. ( scaleControl : false 및 스크롤 휠 : false 는 마우스 휠이 확대 또는 축소되는 것을 방지합니다)

function initMap() {
            // Styles a map in night mode.
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 23.684994, lng: 90.356331},
                zoom: 8,
                scaleControl: false,
                scrollwheel: false,
              styles: [
                {elementType: 'geometry', stylers: [{color: 'F1F2EC'}]},
                {elementType: 'labels.text.stroke', stylers: [{color: '877F74'}]},
                {elementType: 'labels.text.fill', stylers: [{color: '877F74'}]},
                {
                  featureType: 'administrative.locality',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#d59563'}]
                },
                {
                  featureType: 'poi',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#d59563'}]
                },
                {
                  featureType: 'poi.park',
                  elementType: 'geometry',
                  stylers: [{color: '#263c3f'}]
                },
                {
                  featureType: 'poi.park',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b'}]
                },
                {
                  featureType: 'road',
                  elementType: 'geometry',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'road',
                  elementType: 'geometry.stroke',
                  stylers: [{color: '#212a37'}]
                },
                {
                  featureType: 'road',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'geometry',
                  stylers: [{color: '#746855'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'geometry.stroke',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'labels.text.fill',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'transit',
                  elementType: 'geometry',
                  stylers: [{color: '#2f3948'}]
                },
                {
                  featureType: 'transit.station',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b3'}]
                },
                {
                  featureType: 'water',
                  elementType: 'geometry',
                  stylers: [{color: '#0676b6'}]
                },
                {
                  featureType: 'water',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#515c6d'}]
                },
                {
                  featureType: 'water',
                  elementType: 'labels.text.stroke',
                  stylers: [{color: '#17263c'}]
                }
              ]
            });
    
             var marker = new google.maps.Marker({
              position: {lat: 23.684994, lng: 90.356331},
              map: map,
              title: 'BANGLADESH'
            });
          }
스 니펫 확장

— 채몬 로이
소스
이 코드는 질문에 대답 할 수 있지만 문제를 해결하는 방법 및 / 또는 이유에 대한 추가 컨텍스트를 제공하면 답변의 장기적인 가치가 향상됩니다. 양질의 답변을 제공 하는 방법을 알아 보십시오 .
— thewaywe는
0

이 간단한 시험으로 해

jQuery

$('.map').click(function(){
    $(this).find('iframe').addClass('clicked')
    }).mouseleave(function(){
    $(this).find('iframe').removeClass('clicked')
});

CSS

.map {
    width: 100%; 
}
.map iframe {
    width: 100%;
    display: block;
    pointer-events: none;
    position: relative; /* IE needs a position other than static */
}
.map iframe.clicked {
    pointer-events: auto;
}

또는 gmap 옵션을 사용하십시오

function init() { 
    var mapOptions = {  
        scrollwheel: false,
— 디미타르
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.