javascript - 鼠标滚动不适用于谷歌地图上的附加 div

Question

我在谷歌地图的中心添加了一个固定标记：

div的CSS：

.centerMarker{
   width:30px;
   height:60px;
   margin:auto;
   position:absolute;
   top:50%;
   left:50%;
   z-index:2;
   background:url('fixedMarker.png') no-repeat center;
   background-size:30px 60px;
   margin-top:-60px;
   margin-left:-15px;
}

将 div 添加到地图的脚本：

$('<div/>').addClass('centerMarker').appendTo(map.getDiv())

这会导致滚动（用于缩放）不适用于附加的 div（但适用于地图的其他部分）。如何使滚动事件通过 div 并到达地图？

编辑：我需要这个 div 是可点击的。所以我不应该禁用这个 div 上的所有事件。

标签： javascriptcssgoogle-mapsgoogle-maps-api-3

Answer 1

由于谷歌地图 iframe 仅在ctrl按下时滚动，您可以使用 JQuery 事件在按下时使centerMarker事件不敏感ctrl，如下所示：

$("window").keydown((e) => {
  if (e.keyCode == 17) {
    $(".centerMarker").css("pointer-events", "none");
  }
});

$("window").keyup((e) => {
  if (e.keyCode == 17) {
    $(".centerMarker").css("pointer-events", "all");
  }
});

#parent {
  position: relative;
}

.centerMarker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent"><iframe width="700" height="440" src="https://maps.google.com/maps?width=700&amp;height=440&amp;hl=en&amp;q=Paris%2C%20France+(Titre)&amp;ie=UTF8&amp;t=&amp;z=10&amp;iwloc=B&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
  <div class="centerMarker">
    test
  </div>
</div><br />

现在的问题是，当您单击 iframe 时，您会专注于它并且 keydown 事件不再触发，您必须在它之外单击以使其再次工作。