触摸事件不适用于 Angular 中的 Google 地图答案

【问题标题】：Touch Events not working with Google Maps in Angular触摸事件不适用于 Angular 中的 Google 地图
【发布时间】：2015-04-24 01:43:32
【问题描述】：

我在 Angular 应用程序中使用 Google Maps javascript API。当使用鼠标在普通台式机上使用谷歌浏览器中的应用程序时，各种导航功能（平移/缩放）在应用程序的谷歌地图部分工作得很好。但是，当我尝试在 Windows 8.1 屏幕上使用触摸手势时，地图无法识别任何平移或缩放手势。如果我捏放大，什么都不会发生。如果我像鼠标一样双击屏幕，地图会放大。如果我用手指拖动，浏览器窗口会处理触摸事件而不是地图 div，因此左右导航页面历史记录和上下拖动滚动整个页面而不是平移地图。

作为另一个实验，我尝试在 Chrome 中使用谷歌地图 http://maps.google.com 本身，它运行良好。所以这意味着它可以以某种方式完成......

那么，它是一种视口元标记类型的东西吗？还是与调整地图元素的大小有关？或者它是一个有角度的东西，我们需要以某种方式对 ngTouch 做一些事情以允许应用程序响应触摸事件？

更新：触摸事件确实在 iPad 上的同一页面上工作。我不确定那是什么意思，但令人鼓舞的是，至少它可以在移动 safari 上运行。看来我们需要向 Angular 传达一些信息来告诉它接受触摸事件。

更新

这个问题已经在bug中处理了

https://issuetracker.google.com/issues/35824421

并在 2016 年 12 月的 Google Maps JavaScript API 3.27 版中得到解决。

【问题讨论】：

在this 地图上尝试这些事件在我测试过的 Windows 平板电脑上也不起作用。另一方面，使用光标可以正常工作。您可能需要考虑在 Maps issue tracker 上提交错误或功能请求。

标签： angularjs google-maps google-maps-api-3 touch multi-touch

【解决方案1】：

将以下代码放在 google maps api 脚本标记之前对我有帮助。但是，不幸的是，它会继续禁用鼠标事件。请问，我们能否找到一个同时支持触摸和鼠标的 Google Maps API 解决方案？

此解决方案代替设置“--user-agent chrome”或“--user-agent safari”的应用程序启动标志

<script>
navigator = navigator || {};
navigator.msMaxTouchPoints = navigator.msMaxTouchPoints || 2;

//navigator.maxTouchPoints = navigator.maxTouchPoints || 2;
//window.ontouchstart = window.ontouchstart || function() {console.log('this is touchstart!');};
</script>

请注意，仅使用了前两行，其他两行已注释掉，不需要。

我对这个解决方案的灵感来自：https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/，非常感谢 Patrick 和 Robert。

【讨论】：

我有一个基于 Chrome Sign Builder 的 kiosk 解决方案并使用了这个建议，因为引导标志并不是真正的解决方案，它就像一个魅力。感谢您的提示！

【解决方案2】：

这实际上是一个谷歌地图错误#6425

有趣的事实是，Google Map API 并没有基于用户代理提供相同的内容。因此，对于某些用例，解决方法是通过以下方式欺骗用户代理以太：

Chrome 开发工具 > 仿真 > 模型
用户代理欺骗扩展
--user-agent chrome 标志

任何 android 或 iOS 设备都可以使用，将默认桌面谷歌地图应用程序更改为类似移动设备的应用程序。拖动和捏合将在此移动应用程序上再次起作用。

经过一些测试，切换到类似移动应用的最小 UA 是“Chrome”或“AppleWebKit/537”，但使用它听起来很危险，因为它很可能在未来发生变化。

对于我的目的，基于 chrome 的 kioks，这将解决问题，直到错误得到修复。

【讨论】：

【解决方案3】：

我使用了上述解决方案并对其进行了修改以使其也可以与鼠标一起使用

<script>

function MapTouch() {
        return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
    }
    if (MapTouch() === true) {
        navigator = navigator || {};
        navigator.msMaxTouchPoints = navigator.msMaxTouchPoints || 2;
   }
</script>

【讨论】：

【解决方案4】：

我遇到了同样的问题。

JJ Stiff 的解决方案启用了触摸事件。

显然，如果您还希望鼠标工作，则必须添加以下行：

navigator.msPointerEnabled = true;

【讨论】：