.NET Maui中Mapsui Callouts浮动显示的实现方法

结论 #

不需要新建额外图层，通过自定义Mapsui原生Callout的模板和位置属性，就能实现类似谷歌地图的浮动效果（即Callout不紧贴Pin，呈现悬浮在地图上方的样式）。

实现步骤 #

1. 自定义Callout UI模板 #

通过CalloutTemplate定义脱离Pin锚点视觉的布局，比如添加圆角、阴影，调整内边距让它更贴近谷歌地图的样式：

<mapsui:MapView x:Name="MapView">
    <mapsui:MapView.CalloutTemplate>
        <DataTemplate>
            <Frame 
                BackgroundColor="White"
                CornerRadius="10"
                Padding="16"
                Margin="0,0,0,30" <!-- 底部留白，拉开与Pin的距离 -->
                HasShadow="True">
                <StackLayout>
                    <Label Text="{Binding Title}" FontSize="16" FontAttributes="Bold" />
                    <Label Text="{Binding Description}" FontSize="14" TextColor="#666666" />
                    <!-- 可添加按钮等交互元素 -->
                </StackLayout>
            </Frame>
        </DataTemplate>
    </mapsui:MapView.CalloutTemplate>
</mapsui:MapView>

2. 调整Callout的位置偏移 #

通过Callout.Offset属性控制Callout相对于Pin的位置，让它向上偏移远离Pin：

// 显示Callout时设置偏移
var targetPin = // 你的目标Pin Feature
var callout = new Callout
{
    Content = new View { /* 绑定Pin的数据 */ },
    Position = ((Point)targetPin.Geometry).Position,
    Offset = new Point(0, -90) // 向上偏移90像素，根据UI大小调整
};
MapView.ShowCallout(callout);

3. 控制显隐逻辑 #

监听地图点击事件，实现点击Pin显示Callout、点击空白区域隐藏的交互：

MapView.MapClicked += (sender, args) =>
{
    // 检测点击是否命中Pin
    var hitFeature = MapView.Map.Layers
        .SelectMany(layer => layer.Features)
        .FirstOrDefault(f => f.Geometry is Point geometry && 
            geometry.ToWorldPos(args.Position, MapView.Map).DistanceTo(args.Position) < 15);

    if (hitFeature != null)
    {
        // 显示浮动Callout
        var callout = new Callout
        {
            Content = new Label { Text = hitFeature["Title"].ToString() },
            Position = ((Point)hitFeature.Geometry).Position,
            Offset = new Point(0, -80)
        };
        MapView.ShowCallout(callout);
    }
    else
    {
        // 隐藏Callout
        MapView.HideCallout();
    }
};

备选方案（原生Callout受限场景） #

如果原生Callout的位置控制仍无法满足需求，才需要考虑新建独立图层：

• 创建一个FeatureLayer，将浮动元素作为Feature添加到图层
• 通过点击事件控制该图层中Feature的可见性和坐标位置
• 这种方式需要手动处理屏幕坐标与地图坐标的转换，复杂度更高，仅作为 fallback 方案

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