在嵌入式Google地图上禁用鼠标滚轮放大

是的,很容易.我遇到了类似的问题.只需将css属性"pointer-events"添加到iframe div并将其设置为"none"即可.

示例:<iframe style ="pointer-events:none"src = ........>

SideNote:此修复程序将禁用地图上的所有其他鼠标事件.它对我有用,因为我们不需要在地图上进行任何用户交互.

我扩展了@nathanielperales解决方案.

在行为描述下面:

单击地图以启用滚动

当鼠标离开地图时,禁用滚动

在javascript代码下面:

// Disable scroll zooming and bind back the click event
var onMapMouseleaveHandler = function (event) {
  var that = $(this);

  that.on('click', onMapClickHandler);
  that.off('mouseleave', onMapMouseleaveHandler);
  that.find('iframe').css("pointer-events", "none");
}

var onMapClickHandler = function (event) {
  var that = $(this);

  // Disable the click handler until the user leaves the map area
  that.off('click', onMapClickHandler);

  // Enable scrolling zoom
  that.find('iframe').css("pointer-events", "auto");

  // Handle the mouse leave event
  that.on('mouseleave', onMapMouseleaveHandler);
}

// Enable map zooming with mouse scroll when the user clicks the map
$('.maps.embed-container').on('click', onMapClickHandler);

而且这里有一个例子的jsfiddle.

我只是在developers.google.com上注册了一个帐户,并获得了一个用于调用Maps API的令牌,并且只是禁用它(滚动:false):

    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('container_google_maps'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 8,
            scrollwheel: false
        });
    }

var mapOptions = {
   scrollwheel: false,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

有一个很棒的简单解决方案.

您需要在css中添加一个自定义类,用于设置指针事件以将canvas映射为none:

.scrolloff{
   pointer-events: none;
}

然后,使用jQuery,您可以根据不同的事件添加和删除该类,例如:

    $( document ).ready(function() {

    // you want to enable the pointer events only on click;

        $('#map_canvas').addClass('scrolloff'); // set the pointer events to none on doc ready
        $('#canvas').on('click', function() {
            $('#map_canvas').removeClass('scrolloff'); // set the pointer events true on click
        });

    // you want to disable pointer events when the mouse leave the canvas area;

     $( "#map_canvas" ).mouseleave(function() {
          $('#map_canvas').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
     });    
});

我在jsfiddle中创建了一个例子,希望有所帮助!

这是一个简单的解决方案.只需将pointer-events: noneCSS 设置<iframe>为禁用鼠标滚动即可.

<div id="gmap-holder">
    <iframe   frameborder="0" 
            src="https://www.google.com/maps/embed/v1/place?q=XXX&key=YYY"></iframe>
</div>

如果要在用户单击地图时激活鼠标滚动,请使用以下JS代码.当鼠标移出地图时,它还将再次禁用鼠标滚动.

$(function() {
    $('#gmap-holder').click(function(e) {
        $(this).find('iframe').css('pointer-events', 'all');
    }).mouseleave(function(e) {
        $(this).find('iframe').css('pointer-events', 'none');
    });
})

我在这次讨论中尝试了第一个答案,无论我做了什么,它都不适合我,所以我提出了自己的解决方案:

用一个类(本例中为.maps)包装iframe,理想情况下嵌入代码:http://embedresponsively.com/ - 将iframe的CSS更改为pointer-events: none然后使用jQuery的click函数到父元素,你可以更改iframes css至pointer-events:auto

HTML

<div class='embed-container maps'>
    <iframe   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"); 
});

我确信只有JavaScript才能做到这一点,如果有人想要添加到这个感觉上.

重新激活指针事件的JavaScript方法非常简单.只需向iFrame(即"iframe")提供一个ID,然后将onclick事件应用于该铸币器div:

onclick="document.getElementById('iframe').style.pointerEvents= 'auto'"

<div class="maps" onclick="document.getElementById('iframe').style.pointerEvents= 'auto'">
   <iframe id="iframe" src=""   frameborder="0"  allowfullscreen></iframe>
</div>

这是我的方法.我发现很容易在各种网站上实现并一直使用它

CSS和JavaScript:

<style type="text/css">
.scrolloff iframe   {
    pointer-events: none ;
}
</style>

<script type="text/javascript">
function scrollOn() {
    $('#map').removeClass('scrolloff'); // set the pointer events true on click

}

function scrollOff() {
    $('#map').addClass('scrolloff'); 

}
</script>

在HTML中,您需要将iframe包装在div中. <div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" >

function scrollOn() {
    $('#map').removeClass('scrolloff'); // set the pointer events true on click
   
}

function scrollOff() {
    $('#map').addClass('scrolloff'); // set the pointer events true on click
    
}

.scrolloff iframe   {
        pointer-events: none ;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" ><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d23845.03946309692!2d-70.0451736316453!3d41.66373705082399!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89fb159980380d21%3A0x78c040f807017e30!2sChatham+Tides!5e0!3m2!1sen!2sus!4v1452964723177"   frameborder="0"  allowfullscreen></iframe></div>