jquery - কিভাবে গুগল ম্যাপস এপিআই সহ মাউস স্ক্রল চাকা স্কেলিং নিষ্ক্রিয় করবেন




google-maps google-maps-api-3 (10)

আপনি শুধু মানচিত্র বিকল্প যোগ করতে হবে:

scrollwheel: false

আমি একটি পৃষ্ঠাতে কয়েকটি মানচিত্র আঁকতে Google মানচিত্র API (v3) ব্যবহার করছি। আমি যা করতে চাই তা হল মানচিত্রে মাউস চাকাটি স্ক্রোল করার সময় জুমিং অক্ষম করুন, তবে আমি নিশ্চিত নই।

আমি স্কেল কন্ট্রোল নিষ্ক্রিয় করেছি (অর্থাৎ স্কেলিং 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
};

আমার ক্ষেত্রে গুরুত্বপূর্ণ জিনিস 'scrollwheel':false সেট করা ছিল 'scrollwheel':false init 'scrollwheel':false । লক্ষ্য করুন: আমি jQuery UI Map ব্যবহার করছি। নীচে আমার CoffeeScript init ফাংশন শিরোনাম:

 $("#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, 

একটি সহজ সমাধান:

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


কিভাবে জাভাস্ক্রিপ্ট গুগল ম্যাপ এপিআই নিষ্ক্রিয় কিভাবে বিস্ময়ের জন্য কেউ

আপনি একবার মানচিত্রে ক্লিক করলে এটি জুমিং স্ক্রোল সক্ষম করবে। এবং আপনার মাউস 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>


কোডের টুকরাটি ব্যবহার করুন, যা আপনাকে সমস্ত মানচিত্র এবং গুগল ম্যাপের জুমিং নিয়ন্ত্রণ দেবে। ( স্কেল কন্ট্রোল: মিথ্যা এবং স্ক্রোলভিয়েল: মিথ্যা জগাখিচুড়ি বা নিচে থেকে mousewheel প্রতিরোধ করবে)

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


মানচিত্র API এর সংস্করণ 3 এ আপনি সহজেই MapOptions বৈশিষ্ট্যের মধ্যে scrollwheel বিকল্পটিকে মিথ্যাতে সেট করতে পারেন:

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

যদি আপনি মানচিত্র API এর সংস্করণ 2 ব্যবহার করেন তবে আপনাকে disableScrollWheelZoom() হিসাবে disableScrollWheelZoom() API কলটি ব্যবহার করতে হবে:

map.disableScrollWheelZoom();

scrollwheel জুমিং মানচিত্র API এর সংস্করণ 3 এ ডিফল্টভাবে সক্ষম করা হয়েছে, তবে সংস্করণ 2 এ এটি সক্রিয় করা হয়েছে যদি না enableScrollWheelZoom() API কলটির সাথে স্পষ্টভাবে সক্ষম না হয়।


শুধু এই জন্য একটি বিশুদ্ধ CSS সমাধান আগ্রহী কেউ incase। নিচের কোডটি মানচিত্রের উপর একটি স্বচ্ছ ডিভভারকে overlays, এবং ক্লিক করা হয় যখন মানচিত্র পিছনে স্বচ্ছ DIV সরানো। ওভারলে জুমিং বাধা দেয়, একবার ক্লিক করে এবং মানচিত্রের পিছনে, জুমিং সক্ষম থাকে।

আমার ব্লগ পোস্টটি দেখুন গুগল ম্যাপস CSS এর সাথে জুম টগল করুন এটি কীভাবে কাজ করে তা ব্যাখ্যা করার জন্য, এবং একটি কাজ ডেমো জন্য pen codepen.io/daveybrown/pen/yVryMr

Disclaimer: এই প্রধানত শেখার জন্য এবং সম্ভবত উৎপাদন ওয়েবসাইটের জন্য সবচেয়ে ভাল সমাধান হবে না।

এইচটিএমএল:

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

সহজবোধ্য রাখো! আসল গুগল ম্যাপ পরিবর্তনশীল, অতিরিক্ত জিনিস কোন।

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

}

ড্যানিয়েল এর কোড কাজ করে (একটি হিপ ধন্যবাদ!)। কিন্তু আমি সম্পূর্ণরূপে জুমিং নিষ্ক্রিয় করতে চেয়েছিলেন। আমি খুঁজে পেয়েছি যে এই চারটি বিকল্পের মধ্যে আমাকে এগুলি ব্যবহার করতে হয়েছিল:

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

দেখুন: MapOptions বস্তু স্পেসিফিকেশন





jquery-plugins