javascript - 谷歌地图 - jquery切换滑动

Question

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

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 类正常工作并禁用嵌入在网页上的 map 的滚动。但是当我点击它时，没有任何反应。 jquery代码有问题吗？

Answer 1

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