手绘多边形绘图谷歌地图移动 - 不工作答案

【问题标题】：Freehand polygon drawing google maps mobile - Not working手绘多边形绘图谷歌地图移动 - 不工作
【发布时间】：2021-10-21 01:42:38
【问题描述】：

我正在尝试实现一个功能，该功能允许移动设备上的用户（例如使用 chrome 或 safari）能够在谷歌地图中绘制多边形。绘图功能在计算机上工作得很好。我怀疑我的问题是 Google 事件侦听器无法识别触摸事件。

例如标准电脑功能：

window.google.maps.event.addListener(
        map,
        'mousemove',
        function (e) {
            console.log(e)
            poly.getPath().push(e.latLng);
        }
    );

然后是移动功能（不起作用）： 该函数甚至没有被调用，因为 'touchmove' 事件未被识别。

let move = window.google.maps.event.addListener(
        map,
        'touchmove',   
        function (e) {
            console.log(e) 
            poly.getPath().push(e.latLng);
        }
    );

CodeSandbox 上提供的基本示例：CodeSandBox

Google Docs 似乎确实不支持触摸事件： Google Maps - Events

如果是这种情况，必须有某种形式的解决方法。 Zillow.com 和 compass.com 等公司确实实施了类似的解决方案。请参阅下面的屏幕截图：

感谢任何帮助。

【问题讨论】：

可用事件列表在这里：developers.google.com/maps/documentation/javascript/reference/…
@MrUpsidown，我记得你和我过去交换过“话”。我已经按照我的帖子浏览了这个列表和相关的事件文档。我可能遗漏了什么，能否请您澄清一下您所提供的链接具体指的是什么？
嗯，您正在尝试使用一个不存在的事件...您提供了 2 个屏幕截图，但没有指向地图的链接。你检查过他们的代码吗？他们是怎么做到的呢？ DrawingManager 没有“手绘”绘图模式，所以我想这是您必须自己处理的事情。您很可能需要简化绘图并将其转换为多边形。 this呢？
我还找到了this article 和this one 和this example。此外，您可能需要针对移动设备调整 gesture handling。
谢谢。一旦我设法实施解决方案，我将通过各种链接并发布解决方案。

标签： javascript google-maps mobile polygon touch-event

【解决方案1】：

Google 确实识别出“touchstart”事件，就我的目的而言，这就是我所需要的。

创建了 2 个函数，一个用于“mousedown”，一个用于“touchstart”。其余功能几乎保持不变。

// On mouse click
window.google.maps.event.addDomListener(
      map.getDiv(),
      "mousedown",
      function (e) {
        drawFreeHandMouse(map, polygonRef);
      }
    );

// on mobile device screen touch
window.google.maps.event.addDomListener(
      map.getDiv(),
      "touchstart",
      function (e) {
        drawFreeHandHand(map, polygonRef);
      }
    );

完整的工作解决方案可以在这里查看： CodeSandBox

希望这可以帮助其他人或可以改进。

【讨论】：