jquery - 사용법 - 구글 맵 api 예제




Google Maps API로 마우스 스크롤 휠 배율을 사용 중지하는 방법 (10)

한 페이지에 몇 개의지도를 그리는 데 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
};

간단한 해결책 :

// 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


계속 간단하게! 기존 Google지도 변수, 추가 자료 없음

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

}

나는이 간단한 시험으로 해낸다.

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, 

당신이 이것을 동적으로하고 싶다면;

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

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

때로는지도 위에 "복잡한"무언가를 보여 주어야합니다 (또는지도가 레이아웃의 작은 부분 임). 그리고이 스크롤 확대가 중간에 오르지 만, 일단 깨끗한지도가 있으면이 확대 / 축소 방법이 좋습니다.


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

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

귀하의 편의를 위해 모든 옵션을 변경할 수 있습니다. github.com/diazemiliano/googlemaps-scrollprevent 에서 확인 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>


지도 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 호출을 사용하여 명시 적으로 사용 설정하지 않으면 사용이 중지됩니다.


코드 조각을 사용하면 Google지도의 모든 색상과 확대 / 축소 제어 기능을 사용할 수 있습니다. ( scaleControl : falsescrollwheel : 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'
            });
          }


필자의 경우 중요한 것은 'scrollwheel':false 을 설정하는 것이 었습니다. init에서는 'scrollwheel':false 였습니다. 알림 : jQuery UI Map 있습니다. 아래는 CoffeeScript init 함수의 제목입니다.

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

Daniel의 코드 가 그 일을합니다 (heap에게 감사드립니다!). 하지만 나는 완전히 줌을 사용하지 않기를 원했습니다. 나는 이렇게하기 위해이 네 가지 옵션 모두를 사용해야 만한다는 것을 알았다.

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

참조 : MapOptions 객체 사양


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

지도를 한 번 클릭하면 확대 / 축소 스크롤을 사용할 수 있습니다. 마우스가 div를 종료 한 후 사용 중지 합니다.

몇 가지 예가 있습니다.

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>







jquery-plugins