Google Maps API ile fare kaydırma tekerleği ölçeklendirmeyi devre dışı bırakma

Bir sayfada birkaç harita çizmek için Google Haritalar API'sını (v3) kullanıyorum. Yapmak istediğim bir şey, fare tekerleğini harita üzerinde kaydırdığınızda yakınlaştırmayı devre dışı bırakmaktır, ancak nasıl olduğundan emin değilim.

ScaleControl devre dışı bıraktım (yani ölçeklendirme UI öğesi kaldırıldı), ancak bu kaydırma tekerleği ölçeklendirmesini engellemez.

İşte benim fonksiyonumun bir parçası (basit bir jQuery eklentisi):

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

Haritalar API'sının 3. sürümünde, bu scrollwheelseçeneği MapOptions özellikleri içinde false olarak ayarlayabilirsiniz :

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

Haritalar API'sının 2. sürümünü kullanıyorsanız, copyScrollWheelZoom () API çağrısını aşağıdaki gibi kullanmanız gerekirdi :

map.disableScrollWheelZoom();

scrollwheelYakınlaştırma Maps API sürüm 3 varsayılan olarak etkindir, ancak açıkça etkinleştirilen sürece sürüm 2'de devre dışı bırakıldığından edilir enableScrollWheelZoom()API çağrısı.

Daniel'in kodu işi yapar (bir yığın teşekkürler!). Ama yakınlaştırmayı tamamen devre dışı bırakmak istedim. Bunu yapmak için bu seçeneklerin dördünü de kullanmak zorunda olduğumu fark ettim:

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

Bkz. MapOptions nesne belirtimi

Bunu dinamik olarak yapmak istemeniz durumunda;

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

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

Bazen haritanın üzerinde "karmaşık" bir şey göstermeniz gerekir (veya harita mizanpajın küçük bir kısmıdır) ve bu kaydırma yakınlaştırma ortada olur, ancak temiz bir haritanız olduğunda, bu yakınlaştırma güzeldir.

Basit tutun! Orijinal Google haritalar değişkeni, fazladan hiçbir şey yok.

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

}

Şu an itibariyle (Ekim 2017) Google, adı verilen yakınlaştırma / kaydırmayı işlemek için belirli bir özellik uyguladı gestureHandling. Amacı, mobil cihazların çalışmasını sağlamaktır, ancak masaüstü tarayıcılarının davranışını da değiştirir. İşte resmi belgelerden :

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

GestureHandling için kullanılabilir değerler:

• 'greedy': Kullanıcı ekranı kaydırdığında (sürüklediğinde) harita her zaman tarar (yukarı veya aşağı, sola veya sağa). Başka bir deyişle, hem tek parmakla kaydırma hem de iki parmakla kaydırma, haritanın kaydırılmasına neden olur.
• 'cooperative': Kullanıcı sayfayı kaydırmak için bir parmağınızla ve haritayı kaydırmak için iki parmağınızla kaydırmalıdır. Kullanıcı haritayı bir parmağınızla kaydırırsa, haritada haritayı hareket ettirmek için kullanıcıya iki parmağınızı kullanmasını söyleyen bir bilgi istemi olan bir yer paylaşımı görünür. Masaüstü uygulamalarında, kullanıcılar bir değiştirici tuşa (ctrl veya ⌘ tuşu) basarken haritayı yakınlaştırabilir veya kaydırabilir.
• 'none': Bu seçenek, mobil cihazlar için harita üzerinde gezinmeyi ve sıkıştırmayı ve haritanın masaüstü cihazlarda sürüklenmesini devre dışı bırakır.
• 'auto'(varsayılan): Sayfanın kaydırılabilir olup olmamasına bağlı olarak, Google Haritalar JavaScript API, gestureHandling özelliğini 'cooperative'veya'greedy'

Kısacası, ayarı kolayca "her zaman yakınlaştırılabilir" ( 'greedy'), "asla yakınlaştırılamaz" ( 'none') veya "kullanıcının yakınlaştırmayı etkinleştirmek için CRTL / ⌘ tuşuna basması gerekir" ( 'cooperative').

Haritayı güzel bir düğme ile kilitlemenizi veya kilidini açmanızı sağlayan daha gelişmiş bir jQuery eklentisi oluşturdum.

Bu eklenti, şeffaf bir yer paylaşımlı div ile Google Haritalar iframe'ini devre dışı bırakır ve unlockit için bir düğme ekler. Kilidi açmak için 650 milisaniye boyunca basmanız gerekir.

Size kolaylık sağlamak için tüm seçenekleri değiştirebilirsiniz. Https://github.com/diazemiliano/googlemaps-scrollprevent adresinden kontrol edin

İşte bir örnek.

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

Benim durumumda en önemli şey 'scrollwheel':falseinit'e girmekti. Uyarı: kullanıyorum jQuery UI Map. Aşağıda CoffeeScript init işlevi başlığım var :

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

Her ihtimale karşı, Geocoding ve özel pinler gibi şeyler yapmayı biraz daha kolaylaştıran GMaps.js kütüphanesini kullanıyorsanız, bu sorunu önceki cevaplardan öğrenilen teknikleri kullanarak nasıl çözdüğünüz aşağıda açıklanmıştır .

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

Javascript Google Harita API'sını nasıl devre dışı bırakacağını merak eden biri için

Bu olacak etkinleştirmek haritaya bir kez tıklarsanız yakınlaştırma kaydırma. Ve devre dışı fare sonra div çıkın.

İşte bazı örnek

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>

Harita seçeneklerine eklemeniz yeterlidir:

scrollwheel: false

Basit bir çözüm:

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

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

Sadece bunun için saf bir css çözüm ilgilenen herkes inase. Aşağıdaki kod, haritanın üzerine saydam bir div yerleştirir ve tıklatıldığında saydam div öğesini haritanın arkasına taşır. Kaplama, tıklandığında yakınlaştırmayı önler ve haritanın arkasında yakınlaştırma etkinleştirilir.

Mesaja blogumu Bkz hakkında css ile Büyütmek geçiş eşleyen bir nasıl çalıştığını açıklama ve kalem için codepen.io/daveybrown/pen/yVryMr bir çalışma demo için.

Feragatname: Bu esas olarak öğrenme içindir ve muhtemelen üretim web siteleri için en iyi çözüm olmayacaktır.

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

Google haritasının tüm renk ve yakınlaştırma kontrolünü sağlayacak bu kod parçasını kullanın. ( scaleControl: false ve scrollwheel: false , fare tekerleğinin yakınlaştırılmasını veya azaltılmasını önler)

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

Bunu bu basit örneklerle yapıyorum

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

Veya gmap seçeneklerini kullanın

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