Question

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

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

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

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

Answer 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

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

2 个答案: