如何在移动网络上完全删除 google 地图标记可点击区域?
How to completely remove google maps marker clickable area on mobile web?
基本上我有一张地图,用户可以点击它来放置标记。但是当地图上已经有一个标记时,我试图在附近放置一个,标记会拦截点击事件,因此地图无法接收它并放置另一个标记。我将 clickable
设置为 false,并且没有为标记创建任何侦听器。
这只是移动设备上的问题 - 我通过将标记的形状设置为 0 x 0 像素的矩形来修复桌面上的问题:
shape: {
type: 'rect',
coords: [0,0,0,0]
}
此“形状”属性 仅适用于桌面 - 当我使用 chrome 开发人员工具设备模拟器加载页面时,HTML area
元素设置可点击区域不存在。
相反,标记上只有一个 div
元素和一个 img
元素。如果我将这些元素的高度和宽度设置为 0(使用检查元素),地图就能够接收标记上的点击事件!但是我不知道如何使用 CSS 或 Javascript 来做到这一点,因为我看不到访问这些元素的方法。
问题似乎是当 google 地图检测到移动设备时,它会通过标记 img
元素侦听点击事件。在桌面上,它会创建一个需要点击的 area
元素。那么有什么方法可以编辑地图 API 创建的元素的高度和宽度吗?或者有没有其他方法可以在移动设备上设置标记的可点击区域?
要模拟我的问题,请按 ctrl+shift+I,然后按 ctrl+shift+M,然后显示“响应”的地方 select 任何移动设备(iPad 最好,因为它更容易导航)。重新加载页面。点击地图放置标记,然后点击该标记。然后您可以关闭开发工具,重新加载页面,并尝试再次放置两个标记以查看应该发生的情况。
如果我删除这一行:
title: 'markertitle',
一切正常。出于某种原因,向标记添加标题会在其顶部创建一个拦截点击的元素。
基本上我有一张地图,用户可以点击它来放置标记。但是当地图上已经有一个标记时,我试图在附近放置一个,标记会拦截点击事件,因此地图无法接收它并放置另一个标记。我将 clickable
设置为 false,并且没有为标记创建任何侦听器。
这只是移动设备上的问题 - 我通过将标记的形状设置为 0 x 0 像素的矩形来修复桌面上的问题:
shape: {
type: 'rect',
coords: [0,0,0,0]
}
此“形状”属性 仅适用于桌面 - 当我使用 chrome 开发人员工具设备模拟器加载页面时,HTML area
元素设置可点击区域不存在。
相反,标记上只有一个 div
元素和一个 img
元素。如果我将这些元素的高度和宽度设置为 0(使用检查元素),地图就能够接收标记上的点击事件!但是我不知道如何使用 CSS 或 Javascript 来做到这一点,因为我看不到访问这些元素的方法。
问题似乎是当 google 地图检测到移动设备时,它会通过标记 img
元素侦听点击事件。在桌面上,它会创建一个需要点击的 area
元素。那么有什么方法可以编辑地图 API 创建的元素的高度和宽度吗?或者有没有其他方法可以在移动设备上设置标记的可点击区域?
要模拟我的问题,请按 ctrl+shift+I,然后按 ctrl+shift+M,然后显示“响应”的地方 select 任何移动设备(iPad 最好,因为它更容易导航)。重新加载页面。点击地图放置标记,然后点击该标记。然后您可以关闭开发工具,重新加载页面,并尝试再次放置两个标记以查看应该发生的情况。
如果我删除这一行:
title: 'markertitle',
一切正常。出于某种原因,向标记添加标题会在其顶部创建一个拦截点击的元素。