.NET MAUI Map中Circle元素点击事件缺失问题求助

.NET MAUI 中的 Circle（属于MapElement）确实没有像Xamarin.Forms那样直接提供Clicked事件，不过可以通过监听Map本身的Clicked事件，再判断点击位置是否落在圆形范围内来实现相同效果，具体步骤如下：

1. 给Circle添加业务标识 #

创建Circle时，保留Tag或自定义属性存储业务数据，方便后续触发逻辑时调用：

// .NET MAUI 代码
Circle circle = new Circle
{
    Center = new Location(37.79752, -122.40183),
    Radius = new Distance(200),
    StrokeWidth = 0,
    FillColor = Color.FromArgb("#88FFC0CB"),
    Tag = 123 // 存储业务ID
};
map.MapElements.Add(circle);

2. 绑定Map的Clicked事件 #

给Map控件添加点击事件处理：

map.Clicked += Map_Clicked;

3. 实现点击判断逻辑 #

在事件方法中，遍历所有Circle元素，计算点击位置到Circle中心的距离，判断是否小于等于圆形半径，以此确认是否点击到目标圆形：

private void Map_Clicked(object sender, MapClickedEventArgs e)
{
    var tappedLocation = e.Location;
    
    foreach (var element in map.MapElements)
    {
        if (element is Circle circle)
        {
            // 计算点击位置到圆心的距离（转换为米）
            double distance = tappedLocation.CalculateDistance(circle.Center, DistanceUnits.Kilometers) * 1000;
            
            // 距离小于等于半径则判定为点击到圆形
            if (distance <= circle.Radius.Meters)
            {
                if (circle.Tag is int storeId)
                {
                    ShowStoreInfo(storeId);
                }
                break; // 找到目标后跳出循环
            }
        }
    }
}

// 业务处理方法示例
private void ShowStoreInfo(int storeId)
{
    // 编写点击后的业务逻辑
}

补充说明 #

• 这里用Location.CalculateDistance计算两点直线距离，通过单位转换后和圆形半径对比，实现点击区域判断。
• 如果地图上Circle数量较多，可考虑按区域分组存储来优化遍历效率。

内容的提问来源于stack exchange，提问作者Muhammad Usman