Cách vô hiệu hóa tỷ lệ bánh xe cuộn chuột bằng API Google Maps

Tôi đang sử dụng Google Maps API (v3) để vẽ một vài bản đồ trên một trang. Một điều tôi muốn làm là vô hiệu hóa thu phóng khi bạn cuộn bánh xe chuột trên bản đồ, nhưng tôi không chắc làm thế nào.

Tôi đã vô hiệu hóa scaleControl (nghĩa là đã loại bỏ phần tử UI chia tỷ lệ), nhưng điều này không ngăn cản tỷ lệ bánh xe cuộn.

Đây là một phần chức năng của tôi (đó là một plugin jQuery đơn giản):

$.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
};

Trong phiên bản 3 của API Maps, bạn chỉ cần đặt scrollwheeltùy chọn thành false trong các thuộc tính MapOptions :

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

Nếu bạn đang sử dụng phiên bản 2 của API Maps, bạn sẽ phải sử dụng lệnh gọi API vô hiệu hóaScrollWheelZoom () như sau:

map.disableScrollWheelZoom();

Thu scrollwheelphóng được bật theo mặc định trong phiên bản 3 của API Bản đồ, nhưng trong phiên bản 2, nó bị vô hiệu hóa trừ khi được bật rõ ràng với lệnh enableScrollWheelZoom()gọi API.

Mã của Daniel thực hiện công việc (cảm ơn rất nhiều!). Nhưng tôi muốn tắt phóng to hoàn toàn. Tôi thấy tôi phải sử dụng tất cả bốn tùy chọn này để làm như vậy:

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

Xem: Đặc tả đối tượng MapOptions

Chỉ trong trường hợp bạn muốn làm điều này một cách năng động;

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

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

Đôi khi bạn phải hiển thị một cái gì đó "phức tạp" trên bản đồ (hoặc bản đồ là một phần nhỏ của bố cục) và tính năng thu phóng cuộn này nằm ở giữa, nhưng một khi bạn có một bản đồ sạch, cách phóng to này rất tuyệt.

Giữ cho nó đơn giản! Biến bản đồ Google gốc, không có nội dung bổ sung nào.

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

}

Kể từ bây giờ (tháng 10 năm 2017) Google đã triển khai một thuộc tính cụ thể để xử lý thu phóng / cuộn, được gọi gestureHandling. Mục đích của nó là để xử lý hoạt động của thiết bị di động, nhưng nó cũng sửa đổi hành vi cho các trình duyệt máy tính để bàn. Đây là từ tài liệu chính thức :

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'
});

Các giá trị khả dụng cho cử chỉ Xử lý là:

• 'greedy': Bản đồ luôn mở (lên hoặc xuống, trái hoặc phải) khi người dùng vuốt (kéo) trên màn hình. Nói cách khác, cả thao tác vuốt một ngón tay và vuốt hai ngón tay đều khiến bản đồ bị xoay.
• 'cooperative': Người dùng phải vuốt bằng một ngón tay để cuộn trang và hai ngón tay để xoay bản đồ. Nếu người dùng vuốt bản đồ bằng một ngón tay, lớp phủ sẽ xuất hiện trên bản đồ, với lời nhắc cho người dùng sử dụng hai ngón tay để di chuyển bản đồ. Trên các ứng dụng máy tính để bàn, người dùng có thể phóng to hoặc xoay bản đồ bằng cách cuộn trong khi nhấn phím bổ trợ (phím ctrl hoặc).
• 'none': Tùy chọn này vô hiệu hóa di chuyển và chụm trên bản đồ cho thiết bị di động và kéo bản đồ trên thiết bị để bàn.
• 'auto'(mặc định): Tùy thuộc vào việc trang có thể cuộn được hay không, API JavaScript của Google Maps đặt thuộc tính cử chỉ thành 'cooperative'hoặc'greedy'

Nói tóm lại, bạn có thể dễ dàng buộc cài đặt thành "luôn có thể phóng to" ( 'greedy'), "không bao giờ có 'none'thể thu phóng" ( 'cooperative') hoặc "người dùng phải nhấn CRTL / để bật thu phóng" ( ).

Tôi đã tạo một plugin jQuery phát triển hơn cho phép bạn khóa hoặc mở khóa bản đồ bằng một nút đẹp.

Plugin này vô hiệu hóa iframe Google Maps với div lớp phủ trong suốt và thêm nút để mở khóa. Bạn phải nhấn trong 650 mili giây để mở khóa.

Bạn có thể thay đổi tất cả các tùy chọn để thuận tiện cho bạn. Kiểm tra nó tại https://github.com/diazemiliano/googlemaps-scrollprevent

Đây là một số ví dụ.

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

Trong trường hợp của tôi, điều quan trọng là thiết lập 'scrollwheel':falsetrong init. Lưu ý: Tôi đang sử dụng jQuery UI Map. Dưới đây là tiêu đề chức năng khởi động CoffeeScript của tôi :

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

Trong trường hợp, bạn đang sử dụng thư viện GMaps.js , việc này đơn giản hơn một chút để thực hiện những việc như Mã hóa địa lý và ghim tùy chỉnh, đây là cách bạn giải quyết vấn đề này bằng cách sử dụng các kỹ thuật học được từ các câu trả lời trước.

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 });
}

Đối với ai đó đang tự hỏi làm thế nào để vô hiệu hóa API Google Map của Javascript

Nó sẽ cho phép cuộn phóng to nếu bạn nhấp vào bản đồ một lần. Và vô hiệu hóa sau khi chuột của bạn thoát khỏi div.

Đây là một số ví dụ

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>

Bạn chỉ cần thêm vào tùy chọn bản đồ:

scrollwheel: false

Một giải pháp đơn giản:

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

Nguồn: https://github.com/Corsidia/scrolloff

Chỉ cần ai đó quan tâm đến một giải pháp css thuần túy cho việc này. Đoạn mã sau phủ lên một div trong suốt trên bản đồ và di chuyển div trong suốt phía sau bản đồ khi được nhấp. Lớp phủ ngăn thu phóng, một khi đã nhấp và phía sau bản đồ, thu phóng được bật.

Xem bài đăng trên blog của tôi Google maps chuyển đổi thu phóng với css để được giải thích về cách thức hoạt động của nó và bút codepen.io/daveybrown/pen/yVryMr để có bản demo hoạt động.

Tuyên bố miễn trừ trách nhiệm: đây chủ yếu là để học và có lẽ sẽ không phải là giải pháp tốt nhất cho các trang web sản xuất.

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;
}

Sử dụng đoạn mã đó, nó sẽ cung cấp cho bạn tất cả các điều khiển màu sắc và phóng to của bản đồ google. ( scaleControl: false và scrollwheel: false sẽ ngăn con lăn chuột phóng to hoặc thu nhỏ)

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'
            });
          }

Tôi làm điều đó với examp đơn giản này

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;
}

Hoặc sử dụng các tùy chọn gmap

function init() { 
    var mapOptions = {  
        scrollwheel: false,