Come distriggersre il ridimensionamento della rotellina del mouse con l’API di Google Maps

Sto usando l’API di Google Maps (v3) per disegnare alcune mappe su una pagina. Una cosa che mi piacerebbe fare è disabilitare lo zoom quando si fa scorrere la rotella del mouse sulla mappa, ma non so come.

Ho disabilitato il dimensionControl (cioè rimosso l’elemento UI di ridimensionamento), ma ciò non impedisce il ridimensionamento della rotella di scorrimento.

Ecco parte della mia funzione (è un semplice plugin 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 }; 

Nella versione 3 dell’API di Maps puoi semplicemente impostare l’opzione scrollwheel su false all’interno delle proprietà MapOptions :

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

Se stavi utilizzando la versione 2 dell’API di Maps, avresti dovuto utilizzare la chiamata API disableScrollWheelZoom () come segue:

 map.disableScrollWheelZoom(); 

Lo zoom della scrollwheel è abilitato per impostazione predefinita nella versione 3 dell’API di Maps, ma nella versione 2 è disabilitato a meno che non sia esplicitamente abilitato con la chiamata API enableScrollWheelZoom() .

Il codice di Daniel fa il lavoro (grazie mille!). Ma volevo disabilitare completamente lo zoom. Ho scoperto che dovevo usare tutte e quattro queste opzioni per farlo:

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

Vedi: Specifiche dell’object MapOptions

Nel caso in cui si voglia fare questo dynamicmente;

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

A volte devi mostrare qualcosa di “complesso” sulla mappa (o la mappa è una piccola parte del layout), e questo ingrandimento dello zoom si trova nel mezzo, ma una volta che hai una mappa pulita, questo modo di zoomare è bello.

Keep it simple! Variabile originale per Google maps, nessuna delle cose extra.

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

Nel mio caso la cosa fondamentale era impostare 'scrollwheel':false in init. Avviso: sto usando jQuery UI Map . Di seguito è riportata la mia intestazione della funzione init di CoffeeScript :

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

Nel caso in cui tu stia utilizzando la libreria GMaps.js , il che rende un po ‘più semplice fare cose come Geocoding e pin personalizzati, ecco come risolvi questo problema usando le tecniche apprese dalle risposte precedenti.

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

Ho creato un plugin jQuery più sviluppato che consente di bloccare o sbloccare la mappa con un bel pulsante.

Questo plug-in distriggers l’iframe di Google Maps con un div overlay trasparente e aggiunge un pulsante per unlockit. È necessario premere per 650 millisecondi per sbloccarlo.

È ansible modificare tutte le opzioni per comodità. Controllalo su https://github.com/diazemiliano/googlemaps-scrollprevent

Ecco alcuni esempi.

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

"Start Scroll Prevent" "Stop Scroll Prevent"

A partire da ora (ottobre 2017) Google ha implementato una proprietà specifica per gestire lo zoom / lo scorrimento, chiamato gestureHandling . Il suo scopo è quello di gestire il funzionamento dei dispositivi mobili, ma modifica anche il comportamento dei browser desktop. Eccolo dalla documentazione ufficiale :

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

I valori disponibili per gestureHandling sono:

  • 'greedy' : la mappa esegue sempre panoramiche (su o giù, a sinistra o a destra) quando l’utente fa scorrere (trascina) lo schermo. In altre parole, sia lo scorrimento con un dito sia lo scorrimento con due dita fanno sì che la mappa venga spostata.
  • 'cooperative' : l’utente deve scorrere con un dito per scorrere la pagina e due dita per scorrere la mappa. Se l’utente fa scorrere la mappa con un dito, viene visualizzata una sovrapposizione sulla mappa, con un messaggio che richiede all’utente di utilizzare due dita per spostare la mappa. Sulle applicazioni desktop, gli utenti possono ingrandire o spostare la mappa scorrendo premendo contemporaneamente un tasto modificatore (il tasto ctrl o ⌘).
  • 'none' : questa opzione disabilita il panning e il pizzicamento sulla mappa per i dispositivi mobili e il trascinamento della mappa sui dispositivi desktop.
  • 'auto' (predefinito): a seconda che la pagina sia scorrevole, l’API JavaScript di Google Maps imposta la proprietà gestureHandling su 'cooperative' o 'greedy'

In breve, puoi facilmente forzare l’impostazione a “sempre ingrandibile” ( 'greedy' ), “mai zoomabile” ( 'none' ), oppure “l’utente deve premere CRTL / ⌘ per abilitare lo zoom” ( 'cooperative' ).

Per qualcuno che si chiede come disabilitare l’ API di Google Maps di Javascript

Attiva lo scorrimento dello zoom se fai clic una volta sulla mappa. E distriggersre dopo il mouse uscire dal div.

Ecco alcuni esempi

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

Hai solo bisogno di aggiungere le opzioni della mappa:

 scrollwheel: false 

Basta incidere a chiunque sia interessato a una soluzione di css pura per questo. Il codice seguente si sovrappone a un div trasparente sulla mappa e sposta il div trasparente dietro la mappa quando viene fatto clic. L’overlay impedisce lo zoom, una volta cliccato e dietro la mappa, lo zoom è abilitato.

Vedi il mio post sul blog Google maps commuta lo zoom con css per una spiegazione su come funziona, e pen codepen.io/daveybrown/pen/yVryMr per una dimostrazione funzionante.

Disclaimer: questo è principalmente per l’apprendimento e probabilmente non sarà la soluzione migliore per i siti web di produzione.

HTML:

 

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

Una soluzione semplice:

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

Usa quel pezzo di codice, che ti darà tutto il controllo del colore e dello zoom della mappa di google. ( scaleControl: false e scrollwheel: false impedirà alla rotellina del mouse di aumentare o diminuire lo zoom)

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

Lo faccio con questi semplici esempi

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

Oppure usa le opzioni gmap

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