首页 文章

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

提问于
浏览 次
0

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

我希望 Map 用滚轮放大/缩小，就像我按 Map 界面上的放大和缩小按钮（在 Map 中心） .

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

2 回答

  • 0

    我想在使用鼠标滚轮进行缩放时防止 Map 平移 .

    这是我如何完成它，注意放大/缩小鼠标滚轮图时，无论光标位置如何，都保持在相同坐标的中心位置 .

    工作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>
    回复于
  • 1

    如果你想用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

    回复于

相关问题