无法使用 Google Maps API 在地图上滑动页面答案

【问题标题】：Can't swipe page with a map using Google Maps API无法使用 Google Maps API 在地图上滑动页面
【发布时间】：2015-10-19 02:52:57
【问题描述】：

我正在测试如何使用 Google Maps API，但我只在使用移动版本的手机上遇到问题。页面可以滑动，但不能在地图上滑动。如果我在手机上询问桌面版本，它会滑动。这是一个例子：http://rsottini.biottux.com.ar 我使用了 HTML5 和 AngularJS。

【问题讨论】：

标签： html mobile google-maps-api-3 swipe

【解决方案1】：

已经回答，但我还不能标记为重复： Disable mouse scroll wheel zoom on embedded Google Maps

所以这是答案： https://stackoverflow.com/a/22567753

我遇到了同样的问题：当滚动页面时，指针变为地图上方，它开始放大/缩小地图，而不是继续滚动页面。 :(

所以我解决了这个问题，在每个 gmap iframe 插入之前放置一个带有 .overlay 的 div，请参阅：

<html>
  <div class="overlay" onClick="style.pointerEvents='none'"></div>
  <iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>

在我的 CSS 中，我创建了类：

.overlay {
   background:transparent; 
   position:relative; 
   width:640px;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
}

div 将覆盖地图，防止指针事件到达它。但是如果你点击 div，它对指针事件变得透明，再次激活地图！

希望能帮到你:)

【讨论】：