Если вы просматриваете встроенные карты iframe, используя ваш трекпад или мышь, вы можете потенциально заманить себя в возможности масштабирования Maps, что очень раздражает.
Попробуйте здесь: https://developers.google.com/maps/documentation/embed/guide#overview
Есть ли способ предотвратить это?
Здесь ответили = > Отключить масштабирование колесика мыши с помощью встроенных карт Google от Богдана. Что он делает, так это то, что он отключит мышь, пока вы не нажмете на карту, и мышь начнет работать снова, если вы вытащите мышь с карты, мышь снова будет отключена.
Примечание: не работает на IE < 11 (Работает отлично на IE 11)
CSS
<style>
.scrolloff {
pointer-events: none;
}
</style>
Script:
<script>
$(document).ready(function () {
// you want to enable the pointer events only on click;
$('#map_canvas1').addClass('scrolloff'); // set the pointer events to none on doc ready
$('#canvas1').on('click', function () {
$('#map_canvas1').removeClass('scrolloff'); // set the pointer events true on click
});
// you want to disable pointer events when the mouse leave the canvas area;
$("#map_canvas1").mouseleave(function () {
$('#map_canvas1').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
});
});
</script>
HTML: (нужно просто указать правильный id, как определено в css и script)
<section id="canvas1" class="map">
<iframe id="map_canvas1" src="https://www.google.com/maps/embe...." width="1170" height="400" frameborder="0" style="border: 0"></iframe>
</section>
Я перередактирую код, написанный #nathanielperales, это действительно сработало для меня. Простая и удобная в использовании, но ее работа только один раз. Поэтому я добавил mouseleave() на JavaScript. Идея, адаптированная из #Bogdan И теперь ее совершенная. Попробуй это. Кредиты идут на #nathanielperales и #Bogdan. Я просто объединил обе идеи. Спасибо вам, ребята. Надеюсь, это поможет и другим...
HTML
<div class='embed-container maps'>
<iframe width='600' height='450' frameborder='0' src='http://foo.com'> </iframe>
</div>
CSS
.maps iframe{
pointer-events: none;
}
JQuery
$('.maps').click(function () {
$('.maps iframe').css("pointer-events", "auto");
});
$( ".maps" ).mouseleave(function() {
$('.maps iframe').css("pointer-events", "none");
});
Импровизация - Адаптация - Преодоление
И вот пример jsFiddle.
да, это возможно с помощью scrollwheel: false.
var mapOptions = {
center: new google.maps.LatLng(gps_x, gps_y),
zoom: 16,//set this value to how much detail you want in the view
disableDefaultUI: false,//set to true to disable all map controls,
scrollwheel: false//set to true to enable mouse scrolling while inside the map area
};
Можно ли отключить масштабирование колесика мыши с помощью встроенных карт Google?
Вот хороший ответ. В моем случае необходимо, чтобы jquery работал исправно. Мой код:
HTML
<div class="overlay"></div>
<iframe src="#MAP_LINK#" width="1220" height="700" frameborder="0" style="border:0; margin-top: 20px;" ></iframe>
CSS
.overlay {
background:transparent;
position:relative;
width:1220px;
height:720px; /* your iframe height */
top:720px; /* your iframe height */
margin-top:-720px; /* your iframe height */
}
JQuery
$('.overlay').click(function(){
$(this).removeClass('overlay');
});
Я создал очень простой плагин jQuery для решения проблемы. Этот плагин автоматически обертывает карту с помощью прозрачного div и кнопки разблокировки, поэтому вы должны отключить их, чтобы активировать навигацию. Проверьте его на https://diazemiliano.github.io/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);Edit in JSFiddle Result JavaScript HTML CSS .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>Взято из
Как отключить масштабирование колесика мыши с помощью API Карт Google
Вы можете просто отключить функциональность колесика прокрутки
options = $.extend({ scrollwheel: false, navigationControl: false, mapTypeControl: false, scaleControl: false, draggable: false, mapTypeId: google.maps.MapTypeId.ROADMAP }, опции);
У меня было много карт на моем веб-сайте, поэтому я изменил @Ronaldinho Learn Coding ответ на более общий.
$( document ).ready(function() {
$('.scroll-safe-map').addClass('scrolloff');
$('.map-control-scroll').on('click', function() {
$('.scroll-safe-map').removeClass('scrolloff');
});
$('.map-control-scroll').mouseleave(function() {
$('.scroll-safe-map').addClass('scrolloff');
});
});
Вы можете отключить его с помощью css.
iframe {
pointer-events: none;
}
вы можете установить колесо прокрутки: False; в свойстве css тега или тега, чтобы отключить прокрутку с карт Google при увеличении и уменьшении.