Google maps JS API在不平移地图的情况下缩放鼠标滚轮

Google maps JS API zoom in/out mouse scroll wheel without panning map

本文关键字：情况下 缩放 鼠标 地图 JS maps API Google      更新时间：2023-09-26

当你用鼠标滚动轮放大/缩小时，它会以有线的方式平移地图，我不喜欢，是否有选项可以禁用平移这个与谷歌地图API?

我想地图放大/缩小与滚轮一样，当我按放大和缩小按钮在地图界面(在地图的中心)。

http://jsfiddle.net/4ozyvknr/

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

我想防止在使用鼠标滚轮缩放时平移地图。

我是这样做的，注意当你用鼠标轮图放大/缩小时，无论光标的位置如何，都保持在同一坐标的中心。

工作小提琴

function initMap() {
    var map_div = document.getElementById('map');
    map = new google.maps.Map(map_div, {
        center: {lat: 34.049388, lng: -118.259901},
        zoom: 10,
        scrollwheel: 0
    });
    
    map_div.addEventListener('wheel', function(event) {
        if (event.deltaY && event.deltaY < 0) {
            //scroll up = zoom in;
            map.setZoom(map.getZoom() + 1);
        } else {
            //scroll down zoom out;
            map.setZoom(map.getZoom() - 1);
        }
        //disable scrolling of window
        event.preventDefault();
    });
    
}
<div id="map" style="width:100%; height:200px;"></div>
<div style="height:300px;"></div>
<h1>End of Page</h1>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>

如果你想禁用sccollwheel缩放，只需添加scrollwheel: false 

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8,
    scrollwheel: false
  });
}
编辑:如果你想改变它随滚轮缩放的方式，那么看看这个线程
相关文章：