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?
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/
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.
Working 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> If you want to disable zoom with scollwheel just add 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
链接地址: http://www.djcxy.com/p/81526.html