Cara menonaktifkan penskalaan roda gulir mouse dengan Google Maps API


560

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

1
Hai, saya membuat plugin yang lebih maju yang memungkinkan Anda untuk mengunci atau membuka kunci peta dengan tombol yang bagus. Juga adalah plugin jQuery. Anda dapat memeriksanya di github.com/diazemiliano/googlemaps-scrollprevent, saya harap Anda menyukainya.
Emiliano Díaz

Ditampilkan dalam Developers Writing the Future oleh Joel Spolsky (CEO & Co-founder Stack Overflow) , dari 17 menit 09 detik - 18 menit 25 detik (2016-12-07).
Peter Mortensen

Jawaban:


986

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.


40
+1 FYI: disableDefaultUI: truedapat menggantikannavigationControl: false, mapTypeControl: false, scaleControl: false
Jordan Arseno

1
Gotcha bagi saya adalah bahwa jika Anda tidak memiliki mapTypeId parameter lainnya diabaikan.
Michael Hunter

Ini berfungsi untuk saya, tetapi memiliki efek samping aneh menonaktifkan roda gulir di dalam modal pada halaman. Tidak ada peta di konten modal dan kursor tidak di atas peta.
Regarmarmike

Sayangnya, ini tidak berfungsi seperti yang diharapkan dengan StreetViewPanorama Map, seperti meletakkan scrollwheel: false, menonaktifkan zoom gulir, tetapi juga menonaktifkan gulir halaman karena masih menangkap gulir entah bagaimana.
Solomon Closson

Daniel, Tolong bantu saya menjawab pertanyaan ini stackoverflow.com/questions/60544486/…
Xavier Issac

103

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


2
Apakah ini masih bekerja untuk Anda? Saya tidak bisa mendapatkan versi v3 saat ini (saya percaya 3,9) untuk mengabaikan roda gulir, dan harus beralih ke semua anak dari objek peta dan menghentikan propagasi ke peta.
c.apolzon

Yup, bekerja untuk saya, terima kasih! Juga, jika Anda ingin menghapus semua widget kontrol peta default, lakukan saja disableDefaultUI: true alih-alih mematikan zoom, putar dan geser kontrol satu per satu.
thomax

33
Waspadalah kapitalisasi; scrollwheelharus semua huruf kecil (hanya menangkap saya dengan menaikkan W)
kez

1
scrollwheel: false itulah yang saya butuhkan
mindore

30

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.


3
Anda dapat menambahkan kode ini di inisialisasi: map.addListener ('click', function () {if (map) map.setOptions ({scrollwheel: true});}); map.addListener ('mouseout', function () {if (map) map.setOptions ({scrollwheel: false});});
Spaceman

Ini berfungsi untuk saya karena saya ingin menginterogasi fungsi scrollwheel peta di luar kode google maps. yaitu dari dalam kode jquery saya sendiri.
lharby

26

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

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

}

10

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').


7

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>


plugin yang bagus, tetapi bagaimana menggunakannya ketika Anda membuat google map dengan JS API alih-alih menggunakan iframe?
ikkez

2
Apakah " Edit in JSFiddle Result JavaScript HTML CSS" benar-benar bagian dari kode?
Peter Mortensen

6

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

6

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

4

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>



3

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


2

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

0

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


Sementara kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang bagaimana dan / atau mengapa memecahkan masalah akan meningkatkan nilai jangka panjang jawaban. Baca cara-jawaban ini untuk memberikan jawaban berkualitas.
thewaywewere

0

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, 
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.