javascript - माउस के स्क्रॉलिंग व्हील व्यवहार को कैप्चर करने से Google मानचित्र iframe को रोकें




jquery google-maps (6)

इस प्रश्न का उत्तर यहां दिया गया है:

यदि आप अपने ट्रैकपैड या माउस का उपयोग करके एम्बेडेड मानचित्र आईफ्रेम के साथ ब्राउज़ कर रहे हैं, तो आप संभावित रूप से मानचित्र की ज़ूमिंग क्षमताओं में जाल कर सकते हैं, जो वास्तव में परेशान है।

इसे आजमाएं: https://developers.google.com/maps/documentation/embed/guide#overview

क्या इसको रोकने के लिए कोई रास्ता है?


आप इसे सीएसएस से अक्षम कर सकते हैं।

iframe {
pointer-events: none;
}

आप स्क्रॉल-व्हील सेट कर सकते हैं: झूठा; ज़ूम-इन और ज़ूम-आउट होने पर Google मानचित्र से स्क्रॉलिंग अक्षम करने के लिए टैग या टैग की सीएसएस संपत्ति में।


मेरे पास मेरी वेबसाइट के भीतर कई मानचित्र थे इसलिए मैंने @Ronaldinho कोडिंग उत्तर को एक सामान्य सामान्य में संशोधित किया।

$( document ).ready(function() {
   $('.scroll-safe-map').addClass('scrolloff'); 
   $('.map-control-scroll').on('click', function() {
       $('.scroll-safe-map').removeClass('scrolloff');
   });
   $('.map-control-scroll').mouseleave(function() {
       $('.scroll-safe-map').addClass('scrolloff'); 
   });    
});

मैं #nathanielperales द्वारा लिखे गए कोड को दोबारा संपादित कर रहा हूं, यह वास्तव में मेरे लिए काम करता है। सरल और पकड़ने में आसान लेकिन इसके काम केवल एक बार। तो मैंने जावास्क्रिप्ट पर mouseleave () जोड़ा। विचार #bogdan से अनुकूलित और अब यह सही है। इसे इस्तेमाल करे। क्रेडिट #nathanielperales और #Bogdan पर जाता है। मैंने बस दोनों विचारों को जोड़ दिया। आप लोगों को धन्यवाद। मुझे उम्मीद है कि यह दूसरों की भी मदद करेगा ...

एचटीएमएल

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'>  </iframe>
</div>

सीएसएस

.maps iframe{
    pointer-events: none;
}

jQuery

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none"); 
});

तात्कालिक व्यवस्था करें, उसे अपनाएं और उससे उभरें

और यहां एक जेएसफ़िल उदाहरण है।


से लिया गया

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

आप स्क्रॉल व्हील कार्यक्षमता को अक्षम कर सकते हैं

विकल्प = $ .extend ({scrollwheel: false, navigationControl: false, mapTypeControl: false, scaleControl: false, draggable: false, mapTypeId: google.maps.MapTypeId.ROADMAP}, विकल्प);


हाँ, स्क्रोलव्हील के माध्यम से यह संभव है: झूठी।

var mapOptions = {
   center: new google.maps.LatLng(gps_x, gps_y),
   zoom: 16,//set this value to how much detail you want in the view
   disableDefaultUI: false,//set to true to disable all map controls,
   scrollwheel: false//set to true to enable mouse scrolling while inside the map area
 };

source







jquery-plugins