我已经实现了在谷歌地图 API 上获取 onClick 事件的常规策略:
map.value.addListener("click", (event) => {
onClick(event);
});
这在大多数情况下都很有效。仅当单击地图时它才会获取单击事件并返回有用的数据,例如纬度/经度。据我所知,这不仅仅是一个常规的 domListener 事件,因此 google 地图 api 本身有自己的实现来触发此事件。
我的问题是,这个点击事件似乎有某种去抖延迟。如果我点击地图,比如说,点击三次,速度非常快,事件只会触发两次。在我看来,每次点击后都有某种 300-500 毫秒的延迟。另一方面,常规 DOM 单击事件在每次单击后触发,但我无法在地图上使用它,因为它不会给我任何纬度/经度数据或其他事件数据。重叠点击也会发生同样的延迟。
哦,顺便说一句,我没有使用双击,并通过
disableDoubleClickZoom
选项禁用了它们。我怀疑常规 onClick 事件的这种延迟恰好是为了防止它与双击混淆。但是,鉴于我已禁用它们,这应该不再重要了。
有什么办法可以改变这个点击事件延迟吗?
到目前为止,这是我的依赖项:
"dependencies": {
"@googlemaps/js-api-loader": "^1.16.8",
"@mdi/font": "^7.4.47",
"@mdi/js": "^7.4.47",
"@quasar/extras": "^1.16.12",
"nuxt": "^3.13.0",
"nuxt-quasar-ui": "^2.1.6",
"quasar": "^2.17.0",
"vue": "^3.5.11",
"vue-router": "^4.4.5"
},
"devDependencies": {
"@types/google.maps": "^3.58.1",
"sass": "^1.72.0"
}
我找到了答案,而且似乎非常简单。我所要做的就是监听
mousedown
和 mouseup
事件,这些事件将在每次点击时触发,并返回纬度/经度。相同的事件也适用于覆盖层。另外,我现在拥有更多的控制权,因为我可以区分左键单击和右键单击以及按下和释放按钮之间的操作。