我使用谷歌地图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
};

当前回答

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

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

参见:MapOptions对象规范

其他回答

我创建了一个更发达的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>

以防你想动态地做这个;

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

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

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

使用这段代码,这将给你谷歌地图的所有颜色和缩放控制。(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' }); }

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

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

}

截至目前(2017年10月),谷歌已经实现了一个特定的属性来处理缩放/滚动,称为手势处理。它的目的是处理移动设备的操作,但它也修改了桌面浏览器的行为。以下是官方文件:

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' }); The available values for gestureHandling are: 'greedy': The map always pans (up or down, left or right) when the user swipes (drags on) the screen. In other words, both a one-finger swipe and a two-finger swipe cause the map to pan. 'cooperative': The user must swipe with one finger to scroll the page and two fingers to pan the map. If the user swipes the map with one finger, an overlay appears on the map, with a prompt telling the user to use two fingers to move the map. On desktop applications, users can zoom or pan the map by scrolling while pressing a modifier key (the ctrl or ⌘ key). 'none': This option disables panning and pinching on the map for mobile devices, and dragging of the map on desktop devices. 'auto' (default): Depending on whether the page is scrollable, the Google Maps JavaScript API sets the gestureHandling property to either 'cooperative' or 'greedy'

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