无法定位map marker容器内部元素，无法点击红点如何解决

无法定位map marker容器内部元素的解决方案 #

你遇到的空容器问题，通常是以下四类原因，对应解决方法如下：

原因1：Marker通过Canvas/WebGL渲染，无实际DOM节点 #

多数地图框架的默认渲染模式会把所有marker直接绘制在画布上，不会生成独立DOM元素，因此在外层容器看不到内部节点。
解决方案：

• 调用地图官方提供的marker事件绑定API，在初始化红点marker时直接绑定click事件即可实现点击逻辑，无需操作DOM
• 若为自定义Canvas图层，可通过坐标碰撞检测实现点击：获取鼠标点击时相对于容器的坐标，与预存的所有红点坐标、尺寸做匹配，命中对应marker后执行操作

原因2：元素被Shadow DOM隔离 #

部分地图组件会通过Shadow DOM封装内部元素，默认开发者工具不会展示内部节点。
解决方案：
打开浏览器开发者工具右上角的设置面板，在「Elements」分类下勾选「Show user agent shadow DOM」，刷新后再检查元素即可看到容器内部的子节点，正常使用document.querySelector等方法定位即可。

原因3：Marker节点被挂载到其他顶层容器 #

部分框架为了控制z-index层级，会把生成的marker节点直接挂载到body或其他顶层容器下，而非保留在map_markerContainer内部。
解决方案：
在开发者工具Elements面板的搜索框输入marker对应的样式类名、自定义属性等特征，即可检索到对应的DOM节点进行操作。

原因4：地图内容嵌套在iframe中 #

如果地图模块是通过iframe嵌入当前页面的，你在父页面检查元素只能看到iframe标签，看不到内部的marker节点。
解决方案：
如果是同源iframe，可以先获取iframe的contentDocument再进行元素定位；如果是跨域iframe，需要通过iframe双方约定的postMessage通信方式实现点击逻辑的触发。

内容的提问来源于stack exchange，提问作者Fatih Enes