كيفية تعطيل التمرير الماوس عجلة عجلة مع أبي خرائط جوجل [jquery]


Answers

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

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

راجع: مواصفات كائن مابوبتيونس

Question

أستخدم واجهة برمجة التطبيقات لخرائط غوغل (الإصدار 3) لرسم بعض الخرائط على إحدى الصفحات. شيء واحد أود القيام به هو تعطيل التكبير عند التمرير عجلة الماوس على الخريطة، ولكن أنا غير متأكد كيف.

لقد تعطيل سكالكونترول (أي إزالة عنصر واجهة المستخدم التحجيم)، ولكن هذا لا يمنع التمرير عجلة عجلة.

هنا هو جزء من وظيفتي (انها بسيطة مسج المساعد):

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



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

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

}



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



للشخص الذي يتساءل عن كيفية تعطيل جافا سكريبت خريطة جوجل أبي

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

وفيما يلي بعض الأمثلة

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>




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

انظر بلدي بلوق وظيفة خرائط جوجل تبديل التكبير مع كس لشرح كيف يعمل، والقلم 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;
}



اعتبارا من الآن (أكتوبر 2017) نفذت جوجل خاصية محددة للتعامل مع التكبير / التمرير، ودعا 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' : يجب على المستخدم انتقد مع إصبع واحد للتمرير الصفحة واثنين من أصابع لعموم الخريطة. إذا كان المستخدم الضربات الشديدة الخريطة بإصبع واحد، يظهر تراكب على الخريطة، مع موجه يقول للمستخدم استخدام إصبعين لتحريك الخريطة. على تطبيقات سطح المكتب، يمكن للمستخدمين تكبير أو تحريك الخريطة عن طريق التمرير أثناء الضغط على مفتاح معدل (مفتاح كترل أو)).
  • 'none' : يؤدي هذا الخيار إلى تعطيل إجراء المسح الضوئي والتعديل على الخريطة لأجهزة الجوال، وسحب الخريطة على أجهزة سطح المكتب.
  • 'auto' (افتراضي): اعتمادا على ما إذا كانت الصفحة قابلة للتمرير، فإن واجهة برمجة تطبيقات جافا سكريبت في خرائط غوغل تحدد خاصية الإيماءة إلى 'cooperative' أو 'greedy'

باختصار، يمكنك بسهولة فرض الإعداد إلى "زومابلي دائما" ( 'greedy' )، "أبدا زومابلي" ( 'none' )، أو "يجب على المستخدم اضغط كرتل / ⌘ لتمكين التكبير" ( 'cooperative' ).




أفعل ذلك مع إكسامبس بسيطة

مسج

$('.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;
}

أو استخدام خيارات غماب

function init() { 
    var mapOptions = {  
        scrollwheel: false,