触摸事件不适用于 Angular 中的 Google 地图 [英] Touch Events not working with Google Maps in Angular
问题描述
我在一个有角度的应用程序中使用 Google Maps javascript API.当在带有鼠标的普通台式机上使用 Google Chrome 中的应用程序时，各种导航功能(平移/缩放)在应用程序的谷歌地图部分工作得很好.但是，当我尝试在 Windows 8.1 屏幕上使用触摸手势时，地图无法识别任何平移或缩放手势.如果我捏缩放，则什么也不会发生.如果我像鼠标一样双击屏幕，那么地图会放大.如果我用手指拖动，浏览器窗口会处理触摸事件而不是地图 div，因此左右导航页面历史记录和上下拖动滚动整个页面而不是平移地图.
I am using Google Maps javascript API within an angular application. When using the app in Google Chrome on a regular desktop machine with a mouse, various navigation features (pan/zoom) work in the google maps part of the application just fine. However, when I try to use touch gestures on a windows 8.1 screen, the maps do not recognize any of the pan or zoom gestures. If I pinch to zoom, nothing happens. If I double tap on the screen like a mouse, then maps will zoom in. If I drag with a finger, the browser window handles the touch events instead of the maps div, so left and right navigates page history and up and down dragging scrolls the whole page instead of panning the maps.
作为另一个实验，我尝试使用谷歌地图 http://maps.google.com 本身Chrome，它运行良好.所以这意味着它可以以某种方式完成......
As another experiment, I tried using google maps http://maps.google.com itself inside of Chrome, and it worked fine. So that means that it can be done somehow....
那么，它是一种视口元标记类型的东西吗?还是与调整地图元素的大小有关?或者它是一个有角度的事情，我们需要以某种方式对 ngTouch 做一些事情来允许应用程序响应触摸事件?
So, is it a viewport meta tag type of thing? Or does it have to do with sizing the map element? Or is it an angular thing and we need to do something with ngTouch somehow to allow the app to respond to touch events?
更新:触摸事件确实在 iPad 上的同一页面上工作.我不确定那是什么意思，但令人鼓舞的是，至少它适用于移动 Safari.似乎我们需要向 Angular 传达一些信息来告诉它接受触摸事件.
Update: the touch events do work on the same page on an iPad. I'm not sure what that says, but it's encouraging that at least it works on mobile safari. It seems that we need to communicate something to Angular to tell it to accept the touch events.
更新
此问题已在错误中处理
https://issuetracker.google.com/issues/35824421
并于 2016 年 12 月在 Google Maps JavaScript API 3.27 版中解决.
and was solved in version 3.27 of Google Maps JavaScript API in December 2016.
推荐答案
这实际上是一个 Google Map 错误 #6425
This is in fact a Google Map bug #6425
有趣的事实是，Google Map API 并未基于用户代理提供相同的内容.因此，对于某些用例，解决方法是通过以下方式欺骗用户代理:
The fun fact is that Google Map API is not serving the same content based on the User Agent. So, for some use case, the workaround is to spoof the User Agent, ether by :
- Chrome 开发工具 > 仿真 > 模型
- 一个用户代理欺骗扩展
- --user-agent chrome 标志
任何 android 或 iOS 设备都可以使用，将默认的桌面谷歌地图应用程序更改为类似移动设备的应用程序.拖动和捏合将再次在此类似移动应用的应用上工作.
Any android or iOS device will work, changing the default desktop google map app to a mobile like app. Drag and pinch will work again on this mobile like app.
经过一些测试，切换到类似移动应用的最小 UA 是Chrome"或AppleWebKit/537"，但使用它听起来很危险，因为它在未来很可能会发生变化.
After some testing, the minimal UA that switches to the mobile like app is "Chrome" or "AppleWebKit/537", but it sounds hazardous to use it, as it may very well change in the future.
就我的目的而言，基于 chrome 的信息亭，这将起到作用，直到错误得到修复.
For my purpose, chrome based kioks, this will do the trick until the bug is fixed.
这篇关于触摸事件不适用于 Angular 中的 Google 地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
