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




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

لقد قمت بإنشاء ملحق 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>

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

حل بسيط:

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


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

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

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

scrollwheel: false

فقط في حالة ، أنت تستخدم مكتبة 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 });
}

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

في الإصدار 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() .


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

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

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


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

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

}

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


اعتبارًا من الآن (تشرين الأول 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' ).


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

راجع مدونتي بوست جوجل خرائط تبديل التكبير مع 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;
}

var arr = new Array();
    function initialize() { 
        var i;  
        var Locations = [
                {
                  lat:48.856614, 
                  lon:2.3522219000000177, 
                  address:'Paris',
                  gval:'25.5',
                  aType:'Non-Commodity',
                  title:'Paris',
                  descr:'Paris'           
                },        
                    {
                  lat: 55.7512419, 
                  lon: 37.6184217,
                  address:'Moscow',
                  gval:'11.5',
                  aType:'Non-Commodity',
                  title:'Moscow',
                  descr:'Moscow Airport'              
                },     

                {
              lat:-9.481553000000002, 
              lon:147.190242, 
              address:'Port Moresby',
              gval:'1',
              aType:'Oil',
              title:'Papua New Guinea',
              descr:'Papua New Guinea 123123123'              
            },
            {
           lat:20.5200,
           lon:77.7500,
           address:'Indore',
            gval:'1',
            aType:'Oil',
            title:'Indore, India',
            descr:'Airport India'
        }
    ];

    var myOptions = {
        zoom: 2,
        center: new google.maps.LatLng(51.9000,8.4731),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map"), myOptions);

    var infowindow =  new google.maps.InfoWindow({
        content: ''
    });

    for (i = 0; i < Locations.length; i++) {
            size=15;        
            var img=new google.maps.MarkerImage('marker.png',           
                new google.maps.Size(size, size),
                new google.maps.Point(0,0),
                new google.maps.Point(size/2, size/2)
           );

        var marker = new google.maps.Marker({
            map: map,
            title: Locations[i].title,
            position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),           
                icon: img
        });

        bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].descr + "</p>",Locations[i].title);  

    }

}

function bindInfoWindow(marker, map, infowindow, html, Ltitle) { 
    google.maps.event.addListener(marker, 'mouseover', function() {
            infowindow.setContent(html); 
            infowindow.open(map, marker); 

    });
    google.maps.event.addListener(marker, 'mouseout', function() {
        infowindow.close();

    }); 
} 

مثال كامل على العمل. يمكنك فقط النسخ واللصق والاستخدام.







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