jquery - नजद - हम किस जगह पर है




Google मानचित्र API के साथ माउस स्क्रोल व्हील स्केलिंग को कैसे अक्षम करें (10)

अभी तक (अक्टूबर 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'
});

इशारे के लिए उपलब्ध मूल्य हैंडलिंग हैं:

  • 'greedy' : जब उपयोगकर्ता स्क्रीन को स्वाइप करता है (मानचित्र चालू करता है) मानचित्र हमेशा पैन (ऊपर या नीचे, बाएं या दाएं) पैन करता है। दूसरे शब्दों में, एक-उंगली स्वाइप और दो अंगुली स्वाइप दोनों नक्शा पैन करने का कारण बनते हैं।
  • 'cooperative' : मानचित्र को पैन करने के लिए उपयोगकर्ता को पृष्ठ और दो अंगुलियों को स्क्रॉल करने के लिए एक उंगली से स्वाइप करना होगा। यदि उपयोगकर्ता मानचित्र को एक उंगली से स्वाइप करता है, तो मानचित्र पर एक ओवरले दिखाई देता है, जिसमें उपयोगकर्ता को नक्शे को स्थानांतरित करने के लिए दो अंगुलियों का उपयोग करने के लिए कहा जाता है। डेस्कटॉप अनुप्रयोगों पर, उपयोगकर्ता एक संशोधक कुंजी (ctrl या ⌘ कुंजी) दबाते समय स्क्रॉल करके मानचित्र को ज़ूम या पैन कर सकते हैं।
  • 'none' : यह विकल्प मोबाइल उपकरणों के लिए मानचित्र पर पैनिंग और पिनिंग अक्षम करता है, और डेस्कटॉप उपकरणों पर मानचित्र खींच रहा है।
  • 'auto' (डिफ़ॉल्ट): पृष्ठ स्क्रॉल करने योग्य है या नहीं, इस पर निर्भर करता है कि Google मानचित्र जावास्क्रिप्ट एपीआई इशारा करता है संपत्ति को या तो 'cooperative' या 'greedy'

संक्षेप में, आप सेटिंग को "हमेशा ज़ूम करने योग्य" ( 'greedy' ), "कभी ज़ूम करने योग्य" ( 'none' ), या "उपयोगकर्ता को ज़ूम सक्षम करने के लिए सीआरटीएल / ⌘ दबाएं" ( 'cooperative' ) को आसानी से मजबूर कर सकते हैं।

मैं पृष्ठ पर कुछ मानचित्र खींचने के लिए Google मानचित्र API (v3) का उपयोग कर रहा हूं। एक चीज जो मैं करना चाहता हूं वह ज़ूमिंग अक्षम है जब आप मानचित्र पर माउस व्हील स्क्रॉल करते हैं, लेकिन मुझे यकीन नहीं है कि कैसे।

मैंने स्केल कंट्रोल को अक्षम कर दिया है (यानी स्केलिंग यूआई तत्व हटा दिया गया है), लेकिन यह स्क्रॉल व्हील स्केलिंग को रोकता नहीं है।

यहां मेरे फ़ंक्शन का हिस्सा है (यह एक साधारण 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
};

आपको मानचित्र विकल्पों में जोड़ने की जरूरत है:

scrollwheel: false

इसे सरल रखें! मूल Google मानचित्र चर, अतिरिक्त सामग्री में से कोई भी नहीं।

 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


कोड के उस टुकड़े का प्रयोग करें, जो आपको Google मानचित्र के सभी रंग और ज़ूमिंग नियंत्रण देगा। ( स्केल कंट्रोल: झूठी और स्क्रोलव्हील: झूठी मूसहेल को ज़ूम अप या डाउन से रोक देगा)

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


बस अगर आप इसे गतिशील रूप से करना चाहते हैं;

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

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

कभी-कभी आपको मानचित्र पर कुछ "जटिल" दिखाना पड़ता है (या नक्शा लेआउट का एक छोटा सा हिस्सा है), और यह स्क्रॉल ज़ूमिंग बीच में हो जाता है, लेकिन एक बार आपके पास एक साफ नक्शा है, तो ज़ूमिंग का यह तरीका अच्छा है।


मेरे मामले में महत्वपूर्ण बात 'scrollwheel':false में सेट करना था 'scrollwheel':false init में 'scrollwheel':false । नोटिस: मैं jQuery UI Map का उपयोग कर रहा हूँ। नीचे मेरा CoffeeScript इनिट फ़ंक्शन शीर्षक है:

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

मैं इसे इस सरल examps के साथ करते हैं

jQuery

$('.map').click(function(){
    $(this).find('iframe').addClass('clicked')
    }).mouseleave(function(){
    $(this).find('iframe').removeClass('clicked')
});

सीएसएस

.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 में आप MapOptions गुणों के भीतर scrollwheel विकल्प को झूठी पर सेट कर सकते हैं:

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

यदि आप मानचित्र API के संस्करण 2 का उपयोग कर रहे थे तो आपको निम्न के रूप में disableScrollWheelZoom() API कॉल का उपयोग करना होगा:

map.disableScrollWheelZoom();

scrollwheel ज़ूमिंग डिफ़ॉल्ट रूप से मैप्स एपीआई के संस्करण 3 में सक्षम है, लेकिन संस्करण 2 में यह अक्षम है जब तक कि सक्षम enableScrollWheelZoom() API कॉल के साथ स्पष्ट रूप से सक्षम नहीं किया जाता है।


डैनियल का कोड नौकरी करता है (धन्यवाद एक ढेर!)। लेकिन मैं पूरी तरह से ज़ूमिंग अक्षम करना चाहता था। मैंने पाया कि मुझे ऐसा करने के लिए इन सभी चार विकल्पों का उपयोग करना था:

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

देखें: MapOptions ऑब्जेक्ट विनिर्देश





jquery-plugins