วิธีปิดการปรับขนาดล้อเลื่อนของเมาส์ด้วย Google Maps API

560

ฉันใช้ Google Maps API (v3) เพื่อวาดแผนที่สองสามหน้า สิ่งหนึ่งที่ฉันต้องการทำคือปิดใช้งานการซูมเมื่อคุณเลื่อนล้อเลื่อนของเมาส์ไปบนแผนที่ แต่ฉันไม่แน่ใจว่าจะทำอย่างไร

ฉันได้ปิดการใช้งาน scaleControl (เช่นลบองค์ประกอบ 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
};

— aaronrussell
แหล่งที่มา

1

สวัสดีฉันสร้างปลั๊กอินที่ได้รับการพัฒนาเพิ่มเติมซึ่งอนุญาตให้คุณล็อกหรือปลดล็อกแผนที่ด้วยปุ่มดี ยังเป็นปลั๊กอิน jQuery คุณสามารถตรวจสอบได้ที่github.com/diazemiliano/googlemaps-scrollpreventฉันหวังว่าคุณจะชอบมัน

— Emiliano Díaz

ให้ความสำคัญกับนักพัฒนาเขียนอนาคตโดย Joel Spolsky (ซีอีโอและผู้ร่วมก่อตั้ง Stack Overflow)ตั้งแต่ 17 นาที 09 วินาที - 18 นาที 25 วินาที (2016-12-07)

— Peter Mortensen

986

ในเวอร์ชัน 3 ของ Maps API คุณสามารถตั้งค่าscrollwheelตัวเลือกให้เป็นเท็จภายในคุณสมบัติMapOptions :

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

หากคุณใช้ Maps API เวอร์ชัน 2 คุณจะต้องใช้การเรียกใช้disableScrollWheelZoom () API ดังนี้:

map.disableScrollWheelZoom();

การscrollwheelซูมถูกเปิดใช้งานตามค่าเริ่มต้นในเวอร์ชัน 3 ของ Maps API แต่ในรุ่น 2 จะถูกปิดการใช้งานเว้นแต่เปิดใช้งานอย่างชัดเจนด้วยการenableScrollWheelZoom()เรียก API

— Daniel Vassallo
แหล่งที่มา

40

+1 FYI: disableDefaultUI: trueสามารถแทนที่navigationControl: false, mapTypeControl: false, scaleControl: false

— Jordan Arseno

1

gotcha สำหรับฉันคือถ้าคุณไม่มี mapTypeId พารามิเตอร์อื่นจะถูกละเว้น

— Michael Hunter

สิ่งนี้ใช้งานได้สำหรับฉัน แต่มันมีผลข้างเคียงที่แปลกประหลาดจากการปิดใช้งานล้อเลื่อนภายในโมดอลของหน้า ไม่มีแผนที่ในเนื้อหา modal และเคอร์เซอร์ไม่อยู่เหนือแผนที่

— regularmike

น่าเศร้าที่นี่ใช้งานไม่ได้ตามที่คาดไว้กับ StreetViewPanorama Map เช่นเดียวกับการใส่ scrollwheel: false ปิดการใช้งานการซูมสโครล แต่ยังปิดการใช้งานการเลื่อนหน้าเว็บ

— โซโลมอน Closson

Daniel โปรดช่วยฉันตอบคำถามนี้ stackoverflow.com/questions/60544486//

— Xavier Issac

103

รหัสของ Danielทำงานได้ดี (ขอบคุณมาก ๆ !) แต่ฉันต้องการปิดการใช้งานการซูมอย่างสมบูรณ์ ฉันพบว่าฉันต้องใช้ทั้งสี่ตัวเลือกเหล่านี้เพื่อทำ:

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

ดู: ข้อกำหนดคุณสมบัติวัตถุ MapOptions

— ไซม่อนตะวันออก
แหล่งที่มา

2

สิ่งนี้ยังใช้ได้กับคุณหรือไม่? ฉันไม่สามารถรับเวอร์ชันปัจจุบันของ v3 (ฉันเชื่อว่าเป็น 3.9) เพื่อเพิกเฉยล้อเลื่อนและต้องหันไปวนลูก ๆ ของวัตถุแผนที่ทั้งหมดและหยุดการแพร่กระจายลงในแผนที่

— c.apolzon

ใช่ทำงานให้ฉันขอบคุณ! นอกจากนี้หากคุณต้องการลบวิดเจ็ตการควบคุมแผนที่เริ่มต้นทั้งหมดเพียงแค่ปิดการใช้งาน DefaultUI: จริงแทนการปิดการซูมการหมุนและการควบคุมการแพนทีละรายการ

— thomax

33

ระวังตัวพิมพ์ใหญ่; scrollwheelความต้องการที่จะเป็นกรณีที่ต่ำกว่า (เพียงจับฉันออกจาก upcasing น W)

— Kez

1

scrollwheel: false ทั้งหมดที่ฉันต้องการ

— mindore

30

ในกรณีที่คุณต้องการทำสิ่งนี้แบบไดนามิก

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

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

บางครั้งคุณต้องแสดงบางสิ่ง "ซับซ้อน" เหนือแผนที่ (หรือแผนที่เป็นส่วนเล็ก ๆ ของเค้าโครง) และการซูมเลื่อนนี้จะอยู่ตรงกลาง แต่เมื่อคุณมีแผนที่ที่สะอาดวิธีการซูมนี้จะดี

— เฟลิเป้เปเรรา
แหล่งที่มา

3

คุณสามารถเพิ่มรหัสนี้ได้เมื่อเริ่มต้น: map.addListener ('คลิก', ฟังก์ชั่น () {if (map) map.setOptions ({scrollwheel: true});}); map.addListener ('mouseout', function () {if (map) map.setOptions ({scrollwheel: false});});

— นักบินอวกาศ

สิ่งนี้ใช้งานได้สำหรับฉันเพราะฉันต้องการสอบถามฟังก์ชั่นการเลื่อนแผนที่ด้านนอกของรหัส Google Maps นั่นคือจากภายในรหัส jquery ของฉันเอง

— lharby

26

ง่าย ๆ เข้าไว้! ตัวแปร Google maps ดั้งเดิมไม่มีของพิเศษ

 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'
});
ค่าที่ใช้ได้สำหรับ gestureHandling คือ:

'greedy': แผนที่จะแพน (ขึ้นหรือลงซ้ายหรือขวา) เสมอเมื่อผู้ใช้เลื่อนหน้าจอ (ลากบน) กล่าวอีกนัยหนึ่งการปัดด้วยนิ้วเดียวและการปัดด้วยสองนิ้วทำให้แผนที่เลื่อน

'cooperative': ผู้ใช้ต้องปัดด้วยนิ้วเดียวเพื่อเลื่อนหน้าและสองนิ้วเพื่อเลื่อนแผนที่ หากผู้ใช้เลื่อนแผนที่ด้วยนิ้วเดียวจะมีการซ้อนทับปรากฏบนแผนที่พร้อมแจ้งให้ผู้ใช้ใช้สองนิ้วเพื่อเลื่อนแผนที่ ในแอปพลิเคชันบนเดสก์ท็อปผู้ใช้สามารถซูมหรือเลื่อนแผนที่ได้โดยการเลื่อนในขณะที่กดปุ่มตัวปรับเปลี่ยน (ปุ่ม ctrl หรือ⌘)

'none': ตัวเลือกนี้จะปิดการใช้งานการแพนและการบีบบนแผนที่สำหรับอุปกรณ์มือถือและการลากแผนที่บนอุปกรณ์เดสก์ท็อป

'auto'(ค่าเริ่มต้น): ขึ้นอยู่กับว่าหน้านั้นเลื่อนได้หรือไม่ Google Maps JavaScript API ตั้งค่าคุณสมบัติ gestureHandling เป็น'cooperative'หรือ'greedy'

ในระยะสั้นคุณสามารถบังคับให้การตั้งค่าเป็น "zoomable เสมอ" ( 'greedy'), "ไม่เคยซูมได้" ( 'none') หรือ "ผู้ใช้ต้องกด CRTL / ⌘เพื่อเปิดใช้งานการซูม" ( 'cooperative')

— กรรม
แหล่งที่มา

7

ฉันสร้างปลั๊กอิน jQuery ที่ได้รับการพัฒนามากขึ้นซึ่งอนุญาตให้คุณล็อกหรือปลดล็อกแผนที่ด้วยปุ่มดี

ปลั๊กอินนี้ปิดใช้งาน iframe ของ Google Maps พร้อม div ที่ซ้อนทับแบบโปร่งใสและเพิ่มปุ่มสำหรับปลดล็อค คุณต้องกด 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>

ขยายตัวอย่างข้อมูล

— Emiliano Díaz
แหล่งที่มา

ปลั๊กอินที่ดี แต่วิธีการใช้งานเมื่อคุณสร้างแผนที่ Google ด้วย JS API แทนที่จะใช้ iframe?

— ikkez

2

เป็นEdit in JSFiddle Result JavaScript HTML CSSส่วนหนึ่งของรหัสหรือไม่

— Peter Mortensen

6

ในกรณีของฉันสิ่งสำคัญคือการ'scrollwheel':falseเริ่มต้น หมายเหตุ: jQuery UI Mapผมใช้ ด้านล่างคือส่วนหัวของฟังก์ชันCoffeeScriptของฉัน:

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

— andilabs
แหล่งที่มา

6

ในกรณีที่คุณใช้ไลบรารีGMaps.jsซึ่งทำให้การทำ Geocoding และพินที่กำหนดเองง่ายขึ้นเล็กน้อยนี่คือวิธีที่คุณแก้ปัญหานี้โดยใช้เทคนิคที่เรียนรู้จากคำตอบก่อนหน้านี้

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

สำหรับคนที่สงสัยว่าจะปิดการใช้งานJavascript Google Map API ได้อย่างไร

มันจะเปิดใช้งานการเลื่อนการซูมหากคุณคลิกแผนที่ครั้งเดียว และปิดการใช้งานหลังจากที่เมาส์ของคุณออกจาก 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>

ขยายตัวอย่างข้อมูล

— AlbertSamuel
แหล่งที่มา

4

คุณเพียงแค่ต้องเพิ่มตัวเลือกแผนที่:

scrollwheel: false

— Kiran Kanzar
แหล่งที่มา

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

เพียงใส่หีบใครมีความสนใจในการแก้ปัญหา CSS ที่บริสุทธิ์สำหรับเรื่องนี้ รหัสต่อไปนี้ซ้อน div โปร่งใสบนแผนที่และย้าย div โปร่งใสด้านหลังแผนที่เมื่อคลิก ภาพซ้อนทับป้องกันการซูมเมื่อคลิกและด้านหลังแผนที่การซูมจะเปิดใช้งาน

ดูบล็อกโพสต์ของฉันGoogle แผนที่สลับซูมด้วย 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>

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

— ดาวี่
แหล่งที่มา

0

ใช้ส่วนของรหัสที่จะให้สีและการควบคุมการซูมของแผนที่ Google ( scaleControl: falseและscrollwheel: falseจะป้องกันไม่ให้ล้อเลื่อนซูมขึ้นหรือลง)

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

ขยายตัวอย่างข้อมูล

— ชาม่อนรอย
แหล่งที่มา

ในขณะที่รหัสนี้อาจตอบคำถามให้บริบทเพิ่มเติมเกี่ยวกับวิธีการและ / หรือทำไมมันแก้ปัญหาจะปรับปรุงค่าระยะยาวของคำตอบ โปรดอ่านวิธีการตอบสำหรับการให้คำตอบที่มีคุณภาพนี้

— อีก

0

ฉันทำกับ examps ง่ายๆนี้

jQuery

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

หรือใช้ตัวเลือก gmap

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

— ดิมิทาร์
แหล่งที่มา