Как отключить масштабирование колеса прокрутки мыши с помощью Google Maps API
https://stackoverflow.com/questions/2330197
-
22-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я использую Google Maps API (v3), чтобы нарисовать несколько карт на странице.Одна вещь, которую я хотел бы сделать, это отключить масштабирование при прокрутке колесика мыши по карте, но я не уверен, как это сделать.
Я отключил scaleControl (т.е.удален элемент масштабирования пользовательского интерфейса), но это не предотвращает масштабирование колеса прокрутки.
Вот часть моей функции (это простой плагин jQuery):
$.fn.showMap = function(options, addr){
options = $.extend({
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);
var map = new google.maps.Map(document.getElementById($(this).attr('id')), options);
// Code cut from this example as not relevant
};
Решение
В версии 3 Maps API вы можете просто установить scrollwheel значение параметра false в пределах Варианты отображения свойства:
options = $.extend({
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);
Если бы вы использовали версию 2 Maps API, вам пришлось бы использовать Отключает Scrollwheelzoom() Вызов API следующим образом:
map.disableScrollWheelZoom();
В scrollwheel масштабирование включено по умолчанию в версии 3 Maps API, но в версии 2 оно отключено, если явно не включено с помощью enableScrollWheelZoom() Вызов API.
Другие советы
Код Дэниела выполняет свою работу (огромное спасибо!).Но я хотел полностью отключить масштабирование.Я обнаружил, что для этого мне пришлось использовать все четыре этих варианта:
{
zoom: 14, // Set the zoom level manually
zoomControl: false,
scaleControl: false,
scrollwheel: false,
disableDoubleClickZoom: true,
...
}
Видишь: Спецификация объекта mapOptions
На всякий случай, если вы хотите сделать это динамически;
function enableScrollwheel(map) {
if(map) map.setOptions({ scrollwheel: true });
}
function disableScrollwheel(map) {
if(map) map.setOptions({ scrollwheel: false });
}
Иногда вам нужно показать что-то "сложное" поверх карты (или карта является небольшой частью макета), и это масштабирование прокрутки происходит посередине, но как только у вас есть чистая карта, этот способ масштабирования хорош.
Пусть все будет просто!Оригинальная переменная Google maps, ничего лишнего.
var mapOptions = {
zoom: 16,
center: myLatlng,
scrollwheel: false
}
На данный момент (октябрь 2017) Google внедрил специальное свойство для обработки масштабирования / прокрутки, называемое gestureHandling.Его назначение - управлять работой мобильных устройств, но оно изменяет поведение и для настольных браузеров.Вот это из официальная документация:
function initMap() { var locationRio = {lat: -22.915, lng: -43.197}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: locationRio, gestureHandling: 'none' });Доступными значениями для gestureHandling являются:
'greedy':Карта всегда перемещается (вверх или вниз, влево или вправо), когда пользователь проводит пальцем по экрану.Другими словами, как свайп одним пальцем, так и свайп двумя пальцами приводят к перемещению карты.'cooperative':Пользователь должен провести одним пальцем, чтобы прокрутить страницу, и двумя пальцами, чтобы переместить карту.Если пользователь проводит по карте одним пальцем, на карте появляется наложение с подсказкой, предлагающей пользователю использовать два пальца для перемещения карты.В настольных приложениях пользователи могут масштабировать или панорамировать карту путем прокрутки при нажатии клавиши-модификатора (ctrl или ⌘).'none':Этот параметр отключает панорамирование и сжатие карты на мобильных устройствах, а также перетаскивание карты на настольных устройствах.'auto'(по умолчанию):В зависимости от того, доступна ли страница для прокрутки, JavaScript API Google Maps устанавливает свойству gestureHandling значение либо'cooperative'или'greedy'
Короче говоря, вы можете легко установить параметр "всегда масштабируемый". ('greedy'), "никогда не масштабируется" ('none'), или "пользователь должен нажать CRTL /⌘, чтобы включить масштабирование" ('cooperative').
Я создал более развитый плагин jQuery, который позволяет вам блокировать или разблокировать карту с помощью красивой кнопки.
Этот плагин отключает iframe Google Maps с прозрачным наложением div и добавляет кнопку для разблокировки.Вы должны нажимать в течение 650 миллисекунд, чтобы разблокировать его.
Вы можете изменить все параметры для вашего удобства.Проверьте это по адресу https://github.com/diazemiliano/googlemaps-scrollprevent
Вот какой-нибудь пример.
(function() {
$(function() {
$("#btn-start").click(function() {
$("iframe[src*='google.com/maps']").scrollprevent({
printLog: true
}).start();
return $("#btn-stop").click(function() {
return $("iframe[src*='google.com/maps']").scrollprevent().stop();
});
});
return $("#btn-start").trigger("click");
});
}).call(this);.embed-container {
position: relative !important;
padding-bottom: 56.25% !important;
height: 0 !important;
overflow: hidden !important;
max-width: 100% !important;
}
.embed-container iframe {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}
.mapscroll-wrap {
position: static !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/diazemiliano/googlemaps-scrollprevent/v.0.6.5/dist/googlemaps-scrollprevent.min.js"></script>
<div class="embed-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.746318586604!2d-71.64614110000001!3d-40.76341959999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9610bf42e48faa93%3A0x205ebc786470b636!2sVilla+la+Angostura%2C+Neuqu%C3%A9n!5e0!3m2!1ses-419!2sar!4v1425058155802"
width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>
<p><a id="btn-start" href="#">"Start Scroll Prevent"</a> <a id="btn-stop" href="#">"Stop Scroll Prevent"</a>
</p>В моем случае решающим моментом было установить 'scrollwheel':false в init.УВЕДОМЛЕНИЕ:Я использую jQuery UI Map.Ниже приведен мой Кофейный скрипт заголовок функции инициализации:
$("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) ->
На всякий случай, вы используете GMaps.js библиотека, которая немного упрощает выполнение таких вещей, как геокодирование и пользовательские пин-коды, вот как вы решаете эту проблему, используя методы, извлеченные из предыдущих ответов.
var Gmap = new GMaps({
div: '#main-map', // FYI, this setting property used to be 'el'. It didn't need the '#' in older versions
lat: 51.044308,
lng: -114.0630914,
zoom: 15
});
// To access the Native Google Maps object use the .map property
if(Gmap.map) {
// Disabling mouse wheel scroll zooming
Gmap.map.setOptions({ scrollwheel: false });
}
Для кого-то, кто задается вопросом, как отключить Javascript Google Map API
Это будет включить масштабирование прокручивается, если вы нажмете на карту один раз.И отключить после того, как ваша мышь выйдет из div.
Вот несколько примеров
var map;
var element = document.getElementById('map-canvas');
function initMaps() {
map = new google.maps.Map(element , {
zoom: 17,
scrollwheel: false,
center: {
lat: parseFloat(-33.915916),
lng: parseFloat(151.147159)
},
});
}
//START IMPORTANT part
//disable scrolling on a map (smoother UX)
jQuery('.map-container').on("mouseleave", function(){
map.setOptions({ scrollwheel: false });
});
jQuery('.map-container').on("mousedown", function() {
map.setOptions({ scrollwheel: true });
});
//END IMPORTANT part.big-placeholder {
background-color: #1da261;
height: 300px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div class="big-placeholder">
</div>
<!-- START IMPORTANT part -->
<div class="map-container">
<div id="map-canvas" style="min-height: 400px;"></div>
</div>
<!-- END IMPORTANT part-->
<div class="big-placeholder">
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIjN23OujC_NdFfvX4_AuoGBbkx7aHMf0&callback=initMaps">
</script>
</body>
</html>Вам просто нужно добавить параметры карты:
scrollwheel: false
Простое решение:
// DISABLE MOUSE SCROLL IN MAPS
// enable the pointer events only on click;
$('.gmap-wrapper').on('click', function () {
$('.gmap-wrapper iframe').removeClass('scrolloff'); // set the pointer events true on click
});
// you want to disable pointer events when the mouse leave the canvas area;
$(".gmap-wrapper").mouseleave(function () {
$('.gmap-wrapper iframe').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
});.scrolloff{ pointer-events: none; }<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gmap-wrapper">
<iframe class="scrolloff" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d44754.55736493158!2d9.151166379101554!3d45.486726!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786bfca7e8fb1cb%3A0xee8d99c9d153be98!2sCorsidia!5e0!3m2!1sit!2sit!4v1496947992608" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</html>Источник: https://github.com/Corsidia/scrolloff
Просто на случай, если кто-нибудь заинтересуется чистым css-решением для этого.Следующий код накладывает прозрачный div поверх карты и перемещает прозрачный div за карту при нажатии на него.Наложение предотвращает масштабирование, после нажатия на него, а за картой масштабирование включено.
Смотрите мой пост в блоге Карты Google переключают масштабирование с помощью css для объяснения, как это работает, и ручки codepen.io/daveybrown/pen/yVryMr для рабочей демо-версии.
Отказ от ответственности:это в основном для обучения и, вероятно, не будет лучшим решением для производственных веб-сайтов.
HTML:
<div class="map-wrap small-11 medium-8 small-centered columns">
<input id="map-input" type="checkbox" />
<label class="map-overlay" for="map-input" class="label" onclick=""></label>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19867.208601651986!2d-0.17101002911118332!3d51.50585742500925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1482355389969"></iframe>
</div>
CSS - файл:
.map-wrap {
position: relative;
overflow: hidden;
height: 180px;
margin-bottom: 10px;
}
#map-input {
opacity: 0;
}
.map-overlay {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
overflow: hidden;
z-index: 2;
}
#map-input[type=checkbox]:checked ~ iframe {
z-index: 3;
}
#map-input[type=checkbox]:checked ~ .map-overlay {
position: fixed;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
z-index: 1;
border: none;
}
Используйте этот фрагмент кода, который предоставит вам все возможности управления цветом и масштабированием Google map.(Контроль масштаба:ложь и колесо прокрутки:ложь предотвратит увеличение или уменьшение масштаба колесика мыши)
function initMap() {
// Styles a map in night mode.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 23.684994, lng: 90.356331},
zoom: 8,
scaleControl: false,
scrollwheel: false,
styles: [
{elementType: 'geometry', stylers: [{color: 'F1F2EC'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '877F74'}]},
{elementType: 'labels.text.fill', stylers: [{color: '877F74'}]},
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{color: '#263c3f'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#f77c2b'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: 'F5DAA6'}]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{color: '#212a37'}]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{color: '#f77c2b'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#746855'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: 'F5DAA6'}]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{color: 'F5DAA6'}]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [{color: '#2f3948'}]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{color: '#f77c2b3'}]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [{color: '#0676b6'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#515c6d'}]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{color: '#17263c'}]
}
]
});
var marker = new google.maps.Marker({
position: {lat: 23.684994, lng: 90.356331},
map: map,
title: 'BANGLADESH'
});
}Я делаю это с помощью следующих простых примеров
jQuery - jQuery - запрос
$('.map').click(function(){
$(this).find('iframe').addClass('clicked')
}).mouseleave(function(){
$(this).find('iframe').removeClass('clicked')
});
CSS - файл
.map {
width: 100%;
}
.map iframe {
width: 100%;
display: block;
pointer-events: none;
position: relative; /* IE needs a position other than static */
}
.map iframe.clicked {
pointer-events: auto;
}
Или используйте параметры gmap
function init() {
var mapOptions = {
scrollwheel: false,
