谷歌地图 JS API 放大/缩小鼠标滚轮而不平移地图答案

【问题标题】：Google maps JS API zoom in/out mouse scroll wheel without panning map谷歌地图 JS API 放大/缩小鼠标滚轮而不平移地图
【发布时间】：2023-04-09 01:20:01
【问题描述】：

当您使用鼠标滚轮放大/缩小时，它会以我不喜欢的有线方式平移地图，是否可以选择禁用使用 google maps API 进行平移？

我想用滚轮放大/缩小地图，就像我在地图界面（地图中心）上按下放大和缩小按钮时一样。

http://jsfiddle.net/4ozyvknr/

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

【问题讨论】：

它只是放大到鼠标所在的位置，仅此而已。我不觉得这很奇怪。

标签： javascript google-maps-api-3

【解决方案1】：

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

我是这样做的，请注意，当您使用鼠标滚轮放大/缩小地图时，无论光标位置如何，地图都以相同的坐标为中心。

工作fiddle

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>

【讨论】：

【解决方案2】：

如果您想使用 scollwheel 禁用缩放，只需添加 scrollwheel: false

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

编辑：如果您想使用滚轮更改缩放方式，请查看this thread

【讨论】：

不是我想要的，看我的回答