AzureMapsControl：如何在地图标记上方显示Razor弹窗？

核心判断 #

你的判断正确：HtmlMarker.HtmlMarkerOptions.Popup仅支持渲染纯HTML内容，无法直接绑定交互式Razor组件。Razor组件依赖.NET后端渲染逻辑，而地图原生Popup仅能处理客户端静态HTML，二者运行机制不兼容。

可行实现方案 #

采用页面级独立Razor组件替代地图原生Popup，步骤如下：

• 在<AzureMap>所在页面添加目标Razor组件（如DxPopup），通过CSS设置其z-index高于地图容器（Azure Maps默认容器z-index通常为1000，可设为2000及以上），确保显示在地图上层。
• 监听标记点击事件，完成定位与边界适配：
  1. 调用Map.GetPixelPosition方法，将标记的经纬度转换为浏览器视口内的像素坐标。
  2. 根据弹窗尺寸与浏览器视口边缘做边界判断，调整弹窗偏移量，避免超出屏幕范围。
• 通过组件绑定属性（如DxPopup的Visible）控制弹窗显隐，同时传递标记关联数据到弹窗组件，实现交互逻辑。

验证结果 #

目前使用DxPopup组件已成功实现需求：弹窗正常显示在地图上方，支持Razor组件交互功能，可根据标记位置精准定位，且通过边界处理避免超出浏览器边缘。

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