[Jquery] كيفية تعطيل تحجيم عجلة التمرير الماوس مع API خرائط جوجل


Answers

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

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

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

Question

أستخدم 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
};



بالنسبة إلى شخص يتساءل عن كيفية تعطيل 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>




حل بسيط:

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




أفعل ذلك مع هذه 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, 



اعتبارًا من الآن (تشرين الأول 2017) ، نفذت Google خاصية معينة للتعامل مع التكبير / التمرير ، المسمى gestureHandling . الغرض منه هو التعامل مع تشغيل الأجهزة المحمولة ، لكنه يعدل أيضًا سلوك متصفحات سطح المكتب. ها هي من الوثائق الرسمية :

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 هي:

  • 'greedy' : تقوم الخريطة دائمًا بالتصغير (لأعلى أو لأسفل أو لليسار أو لليمين) عندما يقوم المستخدم بالتمرير (يسحب) الشاشة. بمعنى آخر ، يؤدي كل من التمرير السريع بأصبع واحد ومرر إصبعين إلى تحريك الخريطة.
  • 'cooperative' : يجب على المستخدم التمرير بإصبع واحد لتصفح الصفحة وإصبعين لتحريك الخريطة. إذا قام المستخدم بتمرير الخريطة بإصبع واحد ، يظهر تراكب على الخريطة ، مع مطالبة المستخدم بإمكانية استخدام إصبعين لتحريك الخريطة. في تطبيقات سطح المكتب ، يمكن للمستخدمين تكبير الخريطة أو تحريكها عن طريق التمرير أثناء الضغط على مفتاح التعديل (مفتاح ctrl أو ⌘).
  • 'none' : يؤدي هذا الخيار إلى تعطيل التمرير والقرص على الخريطة لأجهزة الجوّال وسحب الخريطة على أجهزة سطح المكتب.
  • 'auto' (افتراضي): استنادًا إلى ما إذا كانت الصفحة قابلة للتمرير ، تعيّن واجهة برمجة تطبيقات جافا سكريبت في خرائط Google الخاصية "gestureHandling 'cooperative' إما 'cooperative' أو 'greedy' greedy 'greedy'

باختصار ، يمكنك بسهولة فرض الإعداد على "always zoomable" ( 'greedy' ) ، "never zoomable" ( 'none' ) ، أو "يجب على المستخدم الضغط على CRTL / ⌘ لتمكين التكبير / التصغير" ( 'cooperative' ).




فقط في حالة ، أنت تستخدم مكتبة GMaps.js ، مما يجعل الأمر أبسط قليلاً للقيام بأشياء مثل Geocoding ودبابيس مخصصة ، إليك كيفية حل هذه المشكلة باستخدام التقنيات المستفادة من الإجابات السابقة.

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



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

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

}