1

I'm trying to make my google maps embed scrolling be disabled by default but when they click on the map it enables the scrolling for that map. Then when they click back out, it disables the scrolling for that map again.

$(document).ready(function() {
  $('iframe').css('pointer-events', 'none');
  
  $('iframe').click(function() {
    $(this).css('pointer-events', 'auto');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d359427.6556816937!2d-76.8851736!3d45.26743345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cd6bcb2596a82c9%3A0x620b1817e3906bc9!2sGreater+Madawaska%2C+ON%2C+Canada!5e0!3m2!1sen!2sus!4v1428983425474" width="400" height="300" frameborder="0" style="border:0"></iframe>

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2718.6871219669715!2d-53.297594999999994!3d47.046369999999996!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4b0d19207be73853%3A0x43c8554901e80797!2sAvalon+Wilderness+Reserve!5e0!3m2!1sen!2sus!4v1428983463691" width="400" height="300" frameborder="0" style="border:0"></iframe>

However my code doesn't work. I would also like to disable pointer-events if the user clicks on anything other than the map.

4

1 回答 1

0

我并没有真正照顾它，但我认为如果 iframe 上没有指针事件，那么 iframe 上就不会有点击事件，因此，您不能将事件处理程序附加到它。我在 iframe 周围放置了一个 div 并将处理程序附加到它：

<script type="text/javascript">
    $(document).ready(function() {
        $('#map_container').click(function() {
            $(this).find("iframe").css('pointer-events', 'auto');
        });
    });
</script>

<div id="map_container" title="Click on the map to interact">
    <iframe style="pointer-events: none;" src="https://www.google.com/maps/embed/v1/place?key=YOURKEY&q=YOURADDRESS" allowfullscreen>
    </iframe>
</div>
于 2017-02-16T11:21:53.757 回答