Google Maps Javascript API 可拖动标记在触摸设备上既不会触发“click”也不会触发“gmp-click”事件

Question

正如我在标题中所写的，我正在处理 Google Maps Javascript API。 特别是，我使用最新发布的高级标记来实现其自定义功能。
这些元素可以设置为可拖动（通过在其选项文字对象中声明适当的属性）并支持“click”和“gmp-click”事件，如官方文档中所述（https://developers .google.com/maps/documentation/javascript/reference/advanced-markers?hl=en).
现在，当我尝试在支持触摸的设备上使用我的地图时，我遇到了这个问题：如果标记设置为可拖动，则不会触发“click”或“gmp-click”事件（或者似乎不会触发）不被触发）

我看到已经有另一个与我的问题类似的问题，即这个问题

Javascript Google Maps API 可拖动标记点击

无论如何，我的可拖动标记似乎根本没有触发任何事件，而不是“穿过”标记的单击事件。事实上，我将单击事件附加到打开信息窗口并将地图平移到标记位置的标记。我还在地图上附加了一个单击事件，以提醒单击位置的纬度和经度。当我单击地图和“固定”标记时，我会得到正确的行为，但是当我单击可拖动标记时，没有任何反应（因此单击事件不会传递到地图）。

以下是我所做的一些代码片段：

在这里，第一个标记在桌面和移动（启用触摸）设备上都可以正常工作，而第二个标记（可拖动标记）无法触发任何事件和操作。

那么，有谁知道如何使可拖动标记能够在支持触摸的设备上触发点击事件？谢谢！

Answer 1

您的问题似乎与一个常见问题有关，即支持触摸的设备上的可拖动标记有时不会触发点击事件。这是因为设备将触摸注册为潜在的拖动开始，从而消耗触摸并且不允许将其识别为点击。

此问题的解决方法是检测拖动结束，然后仅在标记尚未拖动时打开信息窗口或执行操作。这涉及跟踪拖动开始时标记的位置，然后将其与拖动结束时的位置进行比较。如果相同，则视为点击事件。

让我们实现这个解决方案：

1. 您需要将

   dragstart

   和

   dragend

   事件侦听器添加到可拖动标记中。
2. 在

   dragstart

   上，保存标记的位置。
3. 在

   dragend

   上，将标记的当前位置与保存的位置进行比较。如果它们相同，请将其视为一次点击。

以下是如何修改代码来实现此目的：

// ... rest of your code ...

for (let i = 0; i < markerPositions.length; i++) {
    const marker = new AdvancedMarkerElement({
        map: map,
        position: markerPositions[i].position,
        gmpDraggable: markerPositions[i].draggable ? true : false,
    });
    
    let startPos = null;

    marker.addEventListener("dragstart", () => {
        startPos = marker.position.toJSON();
    });

    marker.addEventListener("dragend", () => {
        const endPos = marker.position.toJSON();

        // Check if the marker has been dragged
        if (startPos.lat === endPos.lat && startPos.lng === endPos.lng) {
            // Handle this as a click event
            openInfoWindow(marker);
        }
    });

    marker.addEventListener("gmp-click", () => {
        openInfoWindow(marker);
    });

    markers.push(marker);
}

function openInfoWindow(marker) {
    const infowindow = new google.maps.InfoWindow({
        content: "This marker has been clicked",
    });

    infowindow.open({
        anchor: marker,
        map: map,      
    });

    map.panTo(marker.position);
}

功能

openInfoWindow

将打开一个信息窗口并将地图平移到标记的位置。当单击标记时触发，或者对于触摸设备上的可拖动标记，当拖动结束但标记的位置未更改时触发。

此解决方案应跨设备提供一致的体验，并在与触摸设备上的可拖动标记交互时允许预期的行为。