gmp-advanced-marker 既不可拖动也不可点击

Question

使用谷歌地图网络组件。 https://developers.google.com/maps/documentation/javascript/web-components/overview

我有这个代码

        <div class="map-container">
            <gmp-map
                center="39.46598273118431,-0.3835740844457525"
                zoom="12"
                map-id="DEMO_MAP_ID"
            >
                <gmp-advanced-marker
                    position="39.46598273118431,-0.3835740844457525"
                    title="Resto"
                    gmpDraggable="true"
                ></gmp-advanced-marker>
            </gmp-map>
        </div>

        <script>
            const m = document.querySelector("gmp-advanced-marker");
            m.addEventListener("gmp-click", (evt) => {
                console.log(evt);
            });
        </script>

标记已正确渲染，但不可拖动，并且当我单击标记时，

gmp-click

事件也不会触发。

有什么想法我做错了吗

更新：不可点击由Google Maps Javascript API可拖动标记解释，在触摸设备上既不会触发“click”也不会触发“gmp-click”事件但仍然无法拖动

Answer 1

据我所知，您的代码没有什么特别的错误。

不过，我会确保仅在正确加载地图后才运行脚本（例如通过内联脚本

callback

）：

<script async src="https://maps.googleapis.com/maps/api/js?callback=initMap&libraries=maps,marker&v=beta">
</script>

此外，由于您使用的是

addEventListener("gmp-click", ...)

，请确保您位于

beta

频道。

将它们放在一起，您的点击事件现在应该可以工作了：

function initMap() {
  const m = document.querySelector("gmp-advanced-marker");
  
  // the `beta` APIs are now loaded -> gmp-clicks can now be registered
  m.addEventListener("gmp-click", (evt) => {
    console.log('addEventListener gmp-click event', evt);
  });
}

最后，我无法确定为什么标记不能通过内联设置拖动

gmpDraggable="true"

。可能是

beta

错误？尽管如此，您可以在 Web 组件上手动正确设置它，这似乎工作正常：

function initMap() {
  const m = document.querySelector("gmp-advanced-marker");
  
  // note that `m.setOptions({ draggable: true})` won't work here...
  m.gmpDraggable = true;

  // returns void
  m.addListener("dragend", (evt) => {
    console.log('dragend evt', evt);
  });
}

这是一个 JSFiddle 重现。