[英]Google maps JS API zoom in/out mouse scroll wheel without panning map
When you zoom in/out with mouse scroll wheel it pans the map in wired way that i don't like, is there option to disable panning this with google maps API? 当您使用鼠标滚轮放大/缩小时,它会以我不喜欢的有线方式平移地图,是否可以通过Google Maps API禁用平移?
I want map to zoom in/out with scroll wheel like when i press zoom in and out buttons on map interface (on center of map). 我希望地图使用滚轮放大/缩小,就像我按地图界面(在地图中心)上的放大和缩小按钮一样。
http://jsfiddle.net/4ozyvknr/ http://jsfiddle.net/4ozyvknr/
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
I wanted to prevent panning of map when zooming with mouse wheel. 我想防止使用鼠标滚轮缩放时地图的平移。
Here's how i done it, note when you zoom in/out with mouse wheel map stay's centered at same coordinates regardless of cursor position. 这是我的操作方法,请注意,当您使用鼠标滚轮地图进行放大/缩小时,光标的居中位置将以相同的坐标为中心,而与光标的位置无关。
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>
If you want to disable zoom with scollwheel just add scrollwheel: false
如果要使用拨轮禁用缩放,只需添加scrollwheel
scrollwheel: false
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
scrollwheel: false
});
}
EDIT: If you want to change the way it zooms with the scroll wheel, then have a look at this thread 编辑:如果您想更改它与滚轮缩放的方式,那么看看这个线程
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.