Azure Maps控件弹窗点击事件及鼠标指针样式设置问题

问题1：弹窗点击无响应，标记点击正常 #

Azure Maps 默认的 Popup 组件本身没有预设点击事件，它仅作为展示容器使用。若需弹窗响应点击，需手动给弹窗的内容元素绑定 click 事件监听器。示例：

const popup = new atlas.Popup({ content: '<div id="popup-content">点击我</div>' });
document.getElementById('popup-content').addEventListener('click', () => {
  // 执行点击逻辑
});

问题2：让弹窗点击事件穿透到下方标记 #

可以实现。通过将弹窗内容的 pointerEvents CSS 属性设置为 none，弹窗会忽略所有鼠标事件，让事件直接传递给下方的地图标记。示例：

// 创建弹窗时配置样式
const popup = new atlas.Popup({
  content: '<div style="pointer-events: none;">弹窗内容</div>'
});

// 或已创建弹窗后修改
popup.getContent().style.pointerEvents = 'none';

问题3：修改标记悬停时的光标样式 #

可以实现。通过监听标记的 mouseover 和 mouseout 事件，动态修改地图容器的光标样式。

问题4：AzureMapsControl 中获取地图容器修改光标 #

在 AzureMapsControl 中，需先通过 getMap() 方法获取原生 Azure Maps 实例，再调用 getCanvasContainer() 获取地图画布容器。示例代码：

// 假设map是AzureMapsControl实例
const nativeMap = map.getMap();

// 标记鼠标悬停事件
marker.events.add('mouseover', () => {
  nativeMap.getCanvasContainer().style.cursor = 'pointer';
});

// 标记鼠标离开事件
marker.events.add('mouseout', () => {
  nativeMap.getCanvasContainer().style.cursor = '';
});

内容的提问来源于stack exchange，提问作者David Thielen