谷歌地图 - jquery 切换滑动答案

【问题标题】：Google map - jquery toggle sliding谷歌地图 - jquery 切换滑动
【发布时间】：2015-06-09 07:23:42
【问题描述】：

我知道该主题已解决，但我正在尝试提出自己的解决方案，但我不明白为什么它不起作用。任何建议将不胜感激。

HTML：

    <section class="map" id="map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d640.0242065261922!2d14.422763000000002!3d50.084474!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470b94ec3c31c091%3A0x9ad699d70874bab9!2sAteli%C3%A9r+Triton!5e0!3m2!1scs!2scz!4v1427795367306" width="100%" height="500" frameborder="0" class="no-interact" style="border:0"></iframe>

CSS：

 .no-interact {
    pointer-events: none;
 }

jQuery:

$(document).ready(function(){
    $("#map").click(function(){
       $("#map").removeClass("no-interact");
    });

    $("#map").mouseleave(function(){
      $("#map").addClass("no-interact");
    });
});

CSS 类正常工作并禁用嵌入网页的地图滚动。但是当我点击它时，什么也没有发生。 jquery代码有问题吗？

【问题讨论】：

你想达到什么目的？
pointer-events: none; 正在做必须做的事情，将元素从目标中移除到任何mouse event。那么你想如何在一个元素上附加一个鼠标事件，你使 mouse events 不可用。
在之前的讨论中，stackoverflow.com/questions/24768772/…，地图上方有一个图层可以捕捉鼠标事件。
感谢 Brenzy，它通过地图顶部的另一层工作。当然，我正在尝试启用/禁用地图缩放...

标签： javascript jquery html css google-maps

【解决方案1】：

谷歌地图有自己的点击事件处理程序。尝试使用 Google Maps JavaScript API 代替 iframe，它具有用于自定义事件绑定的 api。 https://developers.google.com/maps/documentation/javascript/reference#MapsEventListener

【讨论】：