Google मैप्स एपीआई के साथ माउस स्क्रॉल व्हील स्केलिंग को कैसे अक्षम करें

560

मैं एक पृष्ठ पर कुछ मानचित्र बनाने के लिए Google मैप्स एपीआई (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
};
jquery  google-maps  google-maps-api-3  jquery-plugins 
— aaronrussell
स्रोत
1
नमस्ते मैंने एक और विकसित प्लगइन बनाया है जो आपको एक अच्छे बटन के साथ मानचित्र को लॉक या अनलॉक करने की अनुमति देता है। इसके अलावा jQuery प्लगइन है। आप इसे github.com/diazemiliano/googlemaps-scrollprevent पर देख सकते हैं मुझे उम्मीद है कि आपको यह पसंद आएगा ।
— एमिलियानो डिआज
— पीटर मोर्टेंसन

जवाबों:

986

मैप्स एपीआई के संस्करण 3 में आप बस मैप्स गुण के scrollwheelभीतर गलत विकल्प चुन सकते हैं:

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

आप मैप्स एपीआई का संस्करण 2 उपयोग कर रहे थे आप उपयोग करना पड़ता था disableScrollWheelZoom () के रूप में इस API कॉल:

map.disableScrollWheelZoom();

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

— डैनियल वासल्लो
स्रोत
40
+1 FYI: disableDefaultUI: trueप्रतिस्थापित कर सकते हैंnavigationControl: false, mapTypeControl: false, scaleControl: false
— जॉर्डन आर्सेनो
1
मेरे लिए एक गेटा यह था कि अगर आपके पास मैप टाइप नहीं है तो दूसरे मापदंडों को नजरअंदाज कर दें।
— माइकल हंटर
यह मेरे लिए काम करता है, लेकिन पेज पर एक मोडल के अंदर स्क्रॉल व्हील को अक्षम करने का अजीब दुष्प्रभाव है। मॉडल सामग्री में कोई मानचित्र नहीं है और कर्सर नक्शे पर नहीं है।
— नियमित रूप से
अफसोस की बात है, यह StreetViewPanorama मैप के साथ अपेक्षित के रूप में काम नहीं करता है, जैसे कि स्क्रॉलव्हील में डालते हैं: झूठी, स्क्रॉल ज़ूम को अक्षम करता है, लेकिन पेज को स्क्रॉल करने में भी अक्षम करता है क्योंकि यह अभी भी किसी न किसी तरह स्क्रॉल को पकड़ रहा है।
— सोलोमन क्लॉसन
डैनियल, तो आप इस सवाल का जवाब देने में मुझे मदद कृपया कर सकते stackoverflow.com/questions/60544486/...
— जेवियर Issac
103

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

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

देखें: MapOptions वस्तु विनिर्देश

— साइमन पूर्व
स्रोत
2
क्या यह अभी भी आपके लिए काम करता है? मैं स्क्रॉल व्हील को नजरअंदाज करने के लिए v3 (मुझे विश्वास है कि इसके 3.9) के वर्तमान संस्करण को प्राप्त करने में असमर्थ रहा है, और मैप ऑब्जेक्ट के सभी बच्चों पर लूपिंग का सहारा लेना पड़ा और नक्शे में प्रचार को रोकना पड़ा।
— c.apolzon
हाँ, मेरे लिए काम करता है, धन्यवाद! इसके अलावा, यदि आप सभी डिफ़ॉल्ट मानचित्र नियंत्रण विजेट को हटाना चाहते हैं, तो बस अक्षम करेंDefaultUI: ज़ूम, रोटेट और पैन फिल्टर को अलग-अलग बंद करने के बजाय सही।
— थोमक्स
33
पूंजीकरण से सावधान रहें; scrollwheelसभी निचले मामले की जरूरत है (बस मुझे डब्ल्यू को ऊपर उठाकर बाहर पकड़ा गया)
— kez
1
स्क्रोलव्हील: असत्य सभी की ज़रूरत थी
— माइंडोर
30

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

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

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

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

— फेलिप परेरा
स्रोत
3
आप इस कोड को आरंभ में जोड़ सकते हैं: map.addListener ('क्लिक', फंक्शन () {if (मैप) map.setOptions ({स्क्रॉलव्हील: ट्रू}};}); map.addListener ('माउसआउट', फंक्शन () {if (मैप) map.setOptions ({स्क्रॉलव्हील: गलत}};});
— स्पेसमैन
यह मेरे लिए काम करता है क्योंकि मैं गूगल मैप्स कोड के बाहर मैप स्क्रोलव्हील फ़ंक्शन से पूछताछ करना चाहता था। यानी मेरे अपने jquery कोड के अंदर से।
— lharby
26

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

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

}
— Creatif_IV
स्रोत
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'ज़ूम करने योग्य नहीं" ( ), या "उपयोगकर्ता को ज़ूम को सक्षम करने के लिए CRTL / / प्रेस करना होगा " ( ) के लिए मजबूर कर सकते हैं 'cooperative'।

— Kar.ma
स्रोत
7

मैंने एक अधिक विकसित jQuery प्लगइन बनाया है जो आपको एक अच्छे बटन के साथ मानचित्र को लॉक या अनलॉक करने की अनुमति देता है।

यह प्लगइन एक पारदर्शी ओवरले डिव के साथ Google मैप्स आइफ्रेम को निष्क्रिय करता है और अनलॉक के लिए एक बटन जोड़ता है। इसे अनलॉक करने के लिए आपको 650 मिली सेकेंड के लिए प्रेस करना होगा।

आप अपनी सुविधा के लिए सभी विकल्पों को बदल सकते हैं। इसे https://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>
स्निपेट का विस्तार करें

— एमिलियानो डिआज़
स्रोत
अच्छा प्लगइन, लेकिन जब आप एक iframe का उपयोग करने के बजाय JS API के साथ Google मानचित्र बनाते हैं तो इसका उपयोग कैसे करें?
— .केज
2
क्या " Edit in JSFiddle Result JavaScript HTML CSS" वास्तव में कोड का हिस्सा है?
— पीटर मोर्टेंसन
6

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

 $("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) ->
— andilabs
स्रोत
6

बस मामले में, आप GMaps.js लाइब्रेरी का उपयोग कर रहे हैं , जो कि जियोकोडिंग और कस्टम पिंस जैसी चीजों को करने के लिए थोड़ा सरल बनाता है, यहां आप पिछले उत्तरों से सीखी गई तकनीकों का उपयोग करके इस मुद्दे को कैसे हल करते हैं।

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 });
}
— racl101
स्रोत
4

किसी ऐसे व्यक्ति के लिए जो जावास्क्रिप्ट गूगल मैप एपीआई को निष्क्रिय करने की सोच रहा हो

यदि आप मानचित्र को एक बार क्लिक करते हैं तो यह ज़ूमिंग स्क्रॉल को सक्षम करेगा । और अपने माउस डिव से बाहर निकलने के बाद अक्षम करें।

यहाँ कुछ उदाहरण है 

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>
स्निपेट का विस्तार करें

— AlbertSamuel
स्रोत
3

एक सरल उपाय:

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

— Darme
स्रोत
2

बस किसी को भी इसके लिए शुद्ध सीएसएस समाधान में दिलचस्पी है। निम्न कोड मैप पर एक पारदर्शी div को ओवरलैप करता है, और क्लिक करने पर पारदर्शी div को मैप के पीछे ले जाता है। ओवरले ज़ूम करने से रोकता है, एक बार क्लिक करने पर, और मैप के पीछे, ज़ूमिंग सक्षम है।

मेरे ब्लॉग पोस्ट को देखें कि यह कैसे काम करता है, इसके स्पष्टीकरण के लिए css के साथ जूम मैप करें और काम करने वाले डेमो के लिए 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>

सीएसएस:

.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;
}
— डेवी
स्रोत
0

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

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'
            });
          }
स्निपेट का विस्तार करें

— चमन रॉय
स्रोत
हालांकि यह कोड इस सवाल का जवाब दे सकता है कि समस्या को हल करने के तरीके के बारे में अतिरिक्त संदर्भ प्रदान करता है और यह समस्या को हल करता है और उत्तर के दीर्घकालिक मूल्य में सुधार करेगा। गुणवत्ता उत्तर प्रदान करने के लिए कृपया यह कैसे पढ़ें - उत्तर दें।
— Thewaywewere
0

मैं इसे इस सरल परीक्षा के साथ करता हूं

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

या गैम्प विकल्प का उपयोग करें

function init() { 
    var mapOptions = {  
        scrollwheel: false,
— दिमितार
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.