如何禁用鼠标滚轮缩放与谷歌地图API

小开

最佳答案

在地图API的版本3中，你可以简单地在MapOptions属性中将scrollwheel选项设置为false:

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

如果你使用版本2的地图API，你将不得不使用disableScrollWheelZoom () API调用如下:

map.disableScrollWheelZoom();

在Maps API的版本3中，scrollwheel缩放在默认情况下是启用的，但在版本2中，它是禁用的，除非通过enableScrollWheelZoom() API调用显式启用。

小开

丹尼尔的代码完成了这项工作(非常感谢!)但我想完全禁用缩放。我发现我必须使用这四个选项来做到这一点:

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

看到:# EYZ0

小开

在我的例子中，关键的事情是在init中设置'scrollwheel':false。注意:我使用的是jQuery UI Map。下面是我的CoffeeScript初始化函数标题:

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

小开

以防你想动态地做这个;

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


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

有时你必须在地图上显示一些“复杂”的东西(或者地图是布局的一小部分)，这种滚动缩放会出现在中间，但一旦你有了一个干净的地图，这种缩放方式就很好了。

小开

保持简单!原来的谷歌映射变量，没有额外的东西。

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

小开

我创建了一个更发达的jQuery插件，允许你用一个漂亮的按钮锁定或解锁地图。

这个插件禁用了谷歌地图iframe透明覆盖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>

小开

以防有人对纯css解决方案感兴趣。下面的代码将一个透明div覆盖在映射之上，并在单击映射时将透明div移动到映射后面。覆盖防止缩放，一旦点击，在地图后面，缩放是启用的。

请参阅我的博客文章谷歌地图切换缩放css来解释它是如何工作的，并使用钢笔codepen.io / daveybrown /钢笔/ 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;
}

小开

对于想知道如何禁用Javascript谷歌映射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>

小开

一个简单的解决方案:

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

来源:# EYZ0

小开

使用这段代码，这将给你谷歌地图的所有颜色和缩放控制。(scaleControl:假和scrollwheel:假将阻止鼠标滚轮向上或向下缩放)

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

小开

我用这个简单的例子来做

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,

小开

你只需要添加地图选项:

scrollwheel: false

小开

截至目前(2017年10月)，谷歌已经实现了一个特定的属性来处理缩放/滚动，称为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'(默认):根据页面是否可滚动，谷歌Maps JavaScript API将gestureHandling属性设置为'cooperative'或'greedy'

简而言之，您可以轻松地将设置强制为“始终可缩放”('greedy')、“永不可缩放”('none')或“用户必须按CRTL/⌘才能启用缩放”('cooperative')。