jquery - كيفية تعطيل تحجيم عجلة التمرير الماوس مع API خرائط جوجل





google-maps google-maps-api-3 jquery-plugins (13)


فقط في حال كنت تريد القيام بذلك بشكل حيوي ؛

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

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

في بعض الأحيان يكون عليك عرض شيء "معقد" على الخريطة (أو أن الخريطة جزء صغير من التخطيط) ، ويكون هذا التقلص الزائف في المنتصف ، ولكن بمجرد أن يكون لديك خريطة نظيفة ، تكون طريقة التكبير هذه رائعة.

أستخدم API لخرائط Google (الإصدار 3) لرسم بعض الخرائط على الصفحة. شيء واحد أود القيام به هو تعطيل التكبير عند تمرير عجلة الماوس فوق الخريطة ، لكنني غير متأكد من كيفية القيام بذلك.

لقد قمت بتعطيل مقياس controlControl (أي إزالة عنصر UI المقاس) ، ولكن هذا لا يمنع تحجيم عجلة التمرير.

هنا جزء من وظيفتي (إنه ملحق 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
};



قانون دانيال يقوم بهذه المهمة (شكرا كومة!). لكني أردت تعطيل التكبير تمامًا. وجدت أن عليّ استخدام كل هذه الخيارات الأربعة للقيام بذلك:

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

راجع: مواصفات كائن MapOptions




لقد قمت بإنشاء ملحق jQuery أكثر تطوراً يسمح لك بقفل أو إلغاء قفل الخريطة باستخدام زر جميل.

يعمل هذا المكوّن الإضافي على تعطيل iframe لخرائط Google باستخدام div تراكب شفاف ويضيف زرًا لإلغاء القفل. يجب عليك الضغط على 650 مللي ثانية لإلغاء تأمينه.

يمكنك تغيير جميع الخيارات لراحتك. التحقق من ذلك في github.com/diazemiliano/googlemaps-scrollprevent

وهنا بعض المثال.

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




استخدم تلك الشفرة ، التي ستمنحك كل التحكم في الألوان وصور التكبير في خريطة جوجل. ( scale controlControl: false و scrollwheel: false سيمنع عجلة الماوس من التكبير لأعلى أو لأسفل)

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




أفعل ذلك مع هذه examps بسيطة

مسج

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

أو استخدم خيارات gmap

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



فقط إذا كان أي شخص مهتم في حل المغلق النقي لهذا. تحتوي التعليمة البرمجية التالية على تراكب شفاف على الخريطة ، وتنقل القسم الشفاف خلف الخريطة عند النقر عليه. يمنع التراكب التكبير ، بمجرد النقر عليه ، وخلف الخريطة ، يتم تمكين التكبير / التصغير.

راجع مدونتي بوست جوجل خرائط تبديل التكبير مع CSS codepen.io/daveybrown/pen/yVryMr كيف يعمل ، وقلم codepen.io/daveybrown/pen/yVryMr لعمل عرض تجريبي.

تنويه: هذا هو أساسا للتعلم وربما لن يكون الحل الأفضل لمواقع الإنتاج.

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



في حالتي ، كان الشيء الحاسم هو وضع 'scrollwheel':false في init. إشعار: أستخدم jQuery UI Map . فيما يلي عنوان وظيفة init الخاص CoffeeScript :

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



تحتاج فقط إلى إضافة خيارات الخريطة:

scrollwheel: false



في الإصدار 3 من API للخرائط ، يمكنك ببساطة ضبط خيار MapOptions على false داخل خصائص MapOptions :

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

إذا كنت تستخدم الإصدار 2 من API للخرائط ، فسيتعين عليك استخدام disableScrollWheelZoom() API كما يلي:

map.disableScrollWheelZoom();

يتم تمكين التكبير / التصغير scrollwheel بشكل افتراضي في الإصدار 3 من API للخرائط ، ولكن في الإصدار 2 يتم تعطيله ما لم يتم تمكينه بشكل صريح مع استدعاء API enableScrollWheelZoom() .




أبقيها بسيطة! خرائط جوجل الأصلية المتغيرة ، لا شيء من الاشياء الاضافية.

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

}



حل بسيط:

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

المصدر: https://github.com/Corsidia/scrolloff




بالنسبة إلى شخص يتساءل عن كيفية تعطيل Javascript Google Map API

وسوف تمكن التمرير التكبير إذا قمت بالنقر فوق الخريطة مرة واحدة. وتعطيل بعد الخروج من الماوس div.

هنا بعض المثال

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>




أنت لا تحتاج حقًا إلى jQuery لذلك ، يمكنك الحصول على / تعيين اسم الربط باستخدام location.hash . إذا قمت بوضعها في وظيفة jQuery الجاهزة ، فيمكنك القيام ببعض الإجراءات إذا تم ضبطها على قيمة معينة:

$(function(){
    // Remove the # from the hash, as different browsers may or may not include it
    var hash = location.hash.replace('#','');

    if(hash != ''){
        // Show the hash if it's set
        alert(hash);

        // Clear the hash in the URL
        location.hash = '';
    }
});

لاحظ أنه عند إزالة التجزئة ، قد يبقى # الزائد في شريط العنوان. إذا كنت تريد الرد على التغييرات المباشرة في نقطة الارتساء ، فيمكنك ربط معاودة الاتصال بحدث hashchange :

$(document).bind("hashchange", function(){
    // Anchor has changed.
});

إذا كنت ترغب في منع قفز صفحتك إلى الأعلى عند مسح نقطة الارتساء ، فيمكنك ربط حدث hashchange بالرجوع إلى موضع التمرير السابق. تحقق من هذا المثال: http://jsfiddle.net/yVf7V/

var lastPos = 0;

$('#on').click(function(){
    location.hash = 'blah';
});

$('#off').click(function(){
    lastPos = $(window).scrollTop();
    location.hash = '';
});

$(window).bind('hashchange',function(event){
    var hash = location.hash.replace('#','');
    if(hash == '') $(window).scrollTop(lastPos);
    alert(hash);
});




jquery google-maps google-maps-api-3 jquery-plugins