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

Question

我在 angular 应用程序中使用 Google 地图 javascript API。当使用鼠标在普通台式机上使用 Google Chrome 中的应用程序时，各种导航功能 (pan/zoom) 在应用程序的 google 地图部分工作得很好。但是，当我尝试在 windows 8.1 屏幕上使用触摸手势时，地图无法识别任何平移或缩放手势。如果我捏缩放，什么也不会发生。如果我像鼠标一样在屏幕上双击，地图就会放大。如果我用手指拖动，浏览器 window 会处理触摸事件而不是地图 div，所以左右导航页面历史和上下拖动滚动整个页面而不是平移地图。

作为另一个实验，我尝试在 Chrome 内部使用 google 映射 http://maps.google.com 本身，并且效果很好。所以这意味着它可以以某种方式完成....

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

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

更新

此问题已在错误

中得到处理

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

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

Answer 1

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

有趣的是，Google 地图 API 并未根据用户代理提供相同的内容。因此，对于某些用例，解决方法是通过以下方式欺骗用户代理，ether：

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

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

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

就我的目的而言，基于 chrome 的自助服务终端，在错误修复之前，这将起到作用。

Answer 2

将以下代码放在 google 地图 api 脚本标记之前对我有帮助。但是，不幸的是，它继续禁用鼠标事件。请问，我们能否为 Google 地图 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。

Answer 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>

Answer 4

我遇到了同样的问题。

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

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

navigator.msPointerEnabled = true;

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

Touch Events not working with Google Maps in Angular

angularjs

google-maps

google-maps-api-3

touch

multi-touch