我正在使用谷歌地图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
};
在第三版的地图API中,你可以简单地在MapOptions属性中把scrollwheel
选项设置为false。
options = $.extend({
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);
如果您使用的是第二版地图API,您就必须使用disableScrollWheelZoom()API调用,如下所示。
map.disableScrollWheelZoom();
在地图API的第3版中,"滚动轮 "缩放功能是默认启用的,但在第2版中,除非明确使用 "enableScrollWheelZoom() "API调用来启用,否则它是禁用的。
Daniel'的代码完成了工作(非常感谢!)。但我想完全禁用缩放功能。我发现我必须使用所有这四个选项才能做到。
{
zoom: 14, // Set the zoom level manually
zoomControl: false,
scaleControl: false,
scrollwheel: false,
disableDoubleClickZoom: true,
...
}
以防你想动态地做这个。
function enableScrollwheel(map) {
if(map) map.setOptions({ scrollwheel: true });
}
function disableScrollwheel(map) {
if(map) map.setOptions({ scrollwheel: false });
}
有时你必须在地图上显示一些"复杂"。 在地图上(或者地图是布局的一小部分),这种滚动缩放的方式就会出现在中间,但是一旦你有了一个干净的地图,这种缩放方式就很好。
截至目前(2017年10月),谷歌已经实现了一个特定的属性来处理缩放/滚动,称为gestureHandling
。
它的目的是为了处理移动设备的操作,但它也修改了桌面浏览器的行为。
这里是[官方文档][1]中的内容。
>.函数 initMap() function initMap() {
var locationRio = {lat: -22.915, lng: -43.197};
变焦:13。
中心。 地点:里约。
gestureHandling。 'none' }); > > > > > > >
gestureHandling: 'none' > }); > > gestureHandling的可用值是。
手势处理的可用值是: >
'贪婪的'
.当用户在屏幕上滑动(拖动)时,地图总是平移(上下、左右)。 当用户滑动(拖动)屏幕时,地图总是平移(上下、左右)。 换句话说,单指轻扫和双指轻扫都会导致地图平移。
'合作'
。 用户必须用一根手指滑动才能滚动页面,两根手指滑动才能平移地图。 如果用户用一根手指滑动地图,地图上就会出现一个叠加,并提示告诉用户用两根手指移动地图。 在桌面应用程序中,用户可以通过滚动同时按修饰键(ctrl或⌘键)来缩放或平移地图。
'none'
。 该选项禁用移动设备上的地图平移和捏合,禁用桌面设备上的地图拖动。gt;
;none'`: 此选项禁止在移动设备上平移和捏住地图,以及在桌面设备上拖动地图。
'auto'
(默认)。 根据页面是否可滚动,谷歌地图JavaScript API将手势处理属性设置为'合作'
或'贪婪'
。
简而言之,你可以轻松地将设置强制为"总是可缩放"。
('贪婪的'
),"永远不能缩放"。
('none'
),或"用户必须按CRTL/⌘才能启用缩放"。
('合作'
)。
[1]: https://developers.google.com/maps/documentation/javascript/interaction
我创建了一个比较发达的jQuery插件,可以让你用一个漂亮的按钮锁定或解锁地图。
这个插件用一个透明的叠加div禁用谷歌地图iframe,并添加了一个解锁按钮,你必须按650毫秒才能解锁。 你必须按650毫秒才能解锁它。
你可以改变所有的选项,以方便你。 检查它在https://github.com/diazemiliano/googlemaps-scrollprevent
**这里有一些例子。
<!--开始片段。 js hide: false babel: false -->
(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>
<!--结束片段-->
以防万一,你使用的是[GMaps.js][1]库,它可以让你做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 });
}
在我的例子中,最关键的是在init中设置'scrollwheel':false
。注意。我正在使用[jQuery UI Map
](https://code.google.com/p/jquery-ui-map/)。下面是我的[CoffeeScript][1]init函数标题。
$("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) ->
对于有人想知道如何禁用Javascript谷歌地图API。
如果你点击一次地图,会启用缩放滚动。 当你的鼠标离开div后,就会停用。
这里是一些例子 <!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true 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>
<!--结束片段-->
你只需要在地图选项中添加即可。
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>
<!--结束片段-->。
如果有人对纯css的解决方案感兴趣的话。 下面的代码是在地图上覆盖一个透明的div,当地图被点击时,透明的div会移动到地图后面。 叠加可以防止缩放,一旦点击,在地图后面,就会启用缩放。
工作原理请参见我的博文[Google maps toggle zoom with css][1],工作演示请参见pen[codepen.io/daveybrown/pen/yVryMr][2]。
免责声明。 这主要是为了学习,可能不会是生产网站的最佳解决方案。
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;
}
[1]: http://web-shed.com/google-maps-toggle-zoom-css/ [2]: http://codepen.io/daveybrown/pen/yVryMr
使用这段代码,将给你所有的颜色和缩放控制的谷歌地图。 (scaleControl: false和scrollwheel: false将防止鼠标滚轮向上或向下缩放)
<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true 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'
});
}
<!--结束片段-->
我用这个简单的考试来做
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,