Cara menonaktifkan penskalaan roda gulir mouse dengan Google Maps API

Saya menggunakan Google Maps API (v3) untuk menggambar beberapa peta pada satu halaman. Satu hal yang ingin saya lakukan adalah menonaktifkan zoom ketika Anda menggulir roda mouse di atas peta, tapi saya tidak yakin bagaimana caranya.

Saya telah menonaktifkan scaleControl (yaitu menghapus elemen UI penskalaan), tetapi ini tidak mencegah penskalaan roda gulir.

Ini adalah bagian dari fungsi saya (ini adalah plugin jQuery sederhana):

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

Di versi 3 Maps API Anda cukup mengatur scrollwheelopsi menjadi false dalam properti MapOptions :

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

Jika Anda menggunakan Maps API versi 2, Anda harus menggunakan panggilan API disableScrollWheelZoom () sebagai berikut:

map.disableScrollWheelZoom();

The scrollwheelzoom diaktifkan secara default di versi 3 dari Maps API, tapi dalam versi 2 dinonaktifkan kecuali secara eksplisit diaktifkan dengan enableScrollWheelZoom()panggilan API.

Kode Daniel melakukan pekerjaannya (terima kasih banyak!). Tapi saya ingin menonaktifkan zoom sepenuhnya. Saya menemukan saya harus menggunakan keempat opsi ini untuk melakukannya:

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

Lihat: Spesifikasi objek MapOptions

Kalau-kalau Anda ingin melakukan ini secara dinamis;

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

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

Kadang-kadang Anda harus menunjukkan sesuatu yang "kompleks" di atas peta (atau peta itu adalah bagian kecil dari tata letak), dan pembesaran gulir ini berada di tengah, tetapi begitu Anda memiliki peta yang bersih, cara pembesaran seperti ini bagus.

Tetap sederhana! Variabel Google maps asli, tidak ada barang ekstra.

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

}

Sampai sekarang (Oktober 2017) Google telah menerapkan properti khusus untuk menangani pembesaran / pengguliran, yang disebut gestureHandling. Tujuannya adalah untuk menangani operasi perangkat seluler, tetapi juga memodifikasi perilaku browser desktop. Ini dari dokumentasi resmi :

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

Nilai yang tersedia untuk gestureHandling adalah:

• 'greedy': Peta selalu bergerak (naik atau turun, kiri atau kanan) saat pengguna menggesek (menyeret) layar. Dengan kata lain, kedua sapuan satu jari dan sapuan dua jari menyebabkan peta bergerak.
• 'cooperative': Pengguna harus menggesek dengan satu jari untuk menggulir halaman dan dua jari untuk menggeser peta. Jika pengguna menggesek peta dengan satu jari, overlay muncul di peta, dengan prompt yang memberitahu pengguna untuk menggunakan dua jari untuk memindahkan peta. Pada aplikasi desktop, pengguna dapat memperbesar atau menggeser peta dengan menggulir sambil menekan tombol pengubah (tombol ctrl atau ⌘).
• 'none': Opsi ini menonaktifkan panning dan cubitan pada peta untuk perangkat seluler, dan menyeret peta pada perangkat desktop.
• 'auto'(default): Bergantung pada apakah halaman dapat digulir, Google Maps JavaScript API menetapkan properti gestureHandling menjadi 'cooperative'atau'greedy'

Singkatnya, Anda dapat dengan mudah memaksa pengaturan untuk "selalu dapat diperbesar" ( 'greedy'), "tidak pernah dapat diperbesar" ( 'none'), atau "pengguna harus menekan CRTL / ⌘ untuk mengaktifkan zoom" ( 'cooperative').

Saya membuat plugin jQuery yang lebih maju yang memungkinkan Anda untuk mengunci atau membuka kunci peta dengan tombol yang bagus.

Plugin ini menonaktifkan iframe Google Maps dengan div overlay transparan dan menambahkan tombol untuk unlockit. Anda harus menekan selama 650 milidetik untuk membukanya.

Anda dapat mengubah semua opsi untuk kenyamanan Anda. Lihat di https://github.com/diazemiliano/googlemaps-scrollprevent

Inilah beberapa contohnya.

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

Dalam kasus saya yang terpenting adalah mengatur 'scrollwheel':falseinit. Perhatikan: Saya menggunakan jQuery UI Map. Di bawah ini adalah judul fungsi init CoffeeScript saya :

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

Untuk berjaga-jaga, Anda menggunakan perpustakaan GMaps.js , yang membuatnya sedikit lebih mudah untuk melakukan hal-hal seperti Geocoding dan pin khusus, berikut cara Anda mengatasi masalah ini menggunakan teknik yang dipelajari dari jawaban sebelumnya.

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

Untuk seseorang yang bertanya-tanya bagaimana cara menonaktifkan Javascript Google Map API

Ini akan memungkinkan gulir zoom jika Anda mengklik peta sekali. Dan nonaktifkan setelah mouse Anda keluar dari div.

Berikut ini beberapa contohnya

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>

Anda hanya perlu menambahkan opsi peta:

scrollwheel: false

Solusi sederhana:

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

Sumber: https://github.com/Corsidia/scrolloff

Hanya memetikan siapa pun yang tertarik dengan solusi css murni untuk ini. Kode berikut melapisi div transparan di atas peta, dan memindahkan div transparan di belakang peta saat diklik. Overlay mencegah zoom, sekali diklik, dan di belakang peta, zoom diaktifkan.

Lihat posting blog saya Google maps toggle zoom dengan css untuk penjelasan cara kerjanya, dan pena codepen.io/daveybrown/pen/yVryMr untuk demo yang berfungsi.

Penafian: ini terutama untuk pembelajaran dan mungkin tidak akan menjadi solusi terbaik untuk situs web produksi.

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

Gunakan potongan kode itu, yang akan memberi Anda semua warna dan kontrol zoom peta google. ( scaleControl: false dan scrollwheel: false akan mencegah roda mouse memperbesar atau memperkecil)

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

Saya melakukannya dengan contoh sederhana ini

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

Atau gunakan opsi gmap

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