Xamarin Forms如何将地图定位Pin设置在屏幕中心偏上位置？

这个问题我做打车类应用时也碰到过——核心需求是让Pin的底部尖端精准对准地图的地理中心，而不是让Pin的整体中心和屏幕中心重合，这也是Uber这类应用的标准交互逻辑。你现在的布局让Pin完全居中，所以尖端会偏下，下面给你几种实用的解决方案：

方法1：快速固定偏移（适合固定尺寸的Pin） #

既然你的Pin已经设了固定的HeightRequest="50"，直接用TranslationY把Pin向上移动一半高度就行，这样尖端就会刚好落在屏幕垂直中心：

修改后的XAML代码：

<Grid>
    <maps:Map x:Name="DisplayMap" IsShowingUser="true" MapType="Street" HorizontalOptions="Fill" VerticalOptions="Fill"/>
    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <!-- 保留你的其他控件 -->
        <Image Source="pin.png" WidthRequest="50" HeightRequest="50" TranslationY="-25"/>
    </StackLayout>
</Grid>

TranslationY="-25"就是把Pin向上移动25（高度的一半），完美让尖端对准地图中心。

方法2：动态计算偏移（适配可变尺寸/多屏幕） #

如果你的Pin尺寸可能变化，或者要适配不同屏幕，最好动态计算偏移量，这样不管Pin多大都能精准对齐：

代码后台实现（简单直接） #

在页面的SizeChanged事件里实时计算偏移：

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    // 等Pin渲染完成后获取实际高度，计算向上偏移一半
    if (PinImage.Height > 0)
    {
        PinImage.TranslationY = -PinImage.Height / 2;
    }
}

记得给Image加个名字：

<Image x:Name="PinImage" Source="pin.png" WidthRequest="50" HeightRequest="50"/>

MVVM友好的绑定方案 #

如果用MVVM模式，写个值转换器来自动转换高度为偏移量：

public class PinOffsetConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value is double height ? -height / 2 : 0;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

然后在XAML里引用并绑定：

<ContentPage.Resources>
    <local:PinOffsetConverter x:Key="PinOffsetConverter"/>
</ContentPage.Resources>

<Grid>
    <maps:Map x:Name="DisplayMap" IsShowingUser="true" MapType="Street" HorizontalOptions="Fill" VerticalOptions="Fill"/>
    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <!-- 其他控件 -->
        <Image Source="pin.png" WidthRequest="50" HeightRequest="50"
               TranslationY="{Binding Source={RelativeSource Self}, Path=Height, Converter={StaticResource PinOffsetConverter}}"/>
    </StackLayout>
</Grid>

这种方式会自动根据Pin的实际渲染高度调整偏移，适配各种场景。

方法3：用Grid行布局精细控制 #

你也可以把Grid拆成三行，让Pin的底部刚好卡在屏幕中心位置：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <!-- 地图占满整个Grid -->
    <maps:Map Grid.RowSpan="3" x:Name="DisplayMap" IsShowingUser="true" MapType="Street" HorizontalOptions="Fill" VerticalOptions="Fill"/>
    <!-- Pin放在中间行，底部对齐行的底部（也就是屏幕中心） -->
    <StackLayout Grid.Row="1" HorizontalOptions="Center" VerticalOptions="End">
        <!-- 其他控件 -->
        <Image Source="pin.png" WidthRequest="50" HeightRequest="50"/>
    </StackLayout>
</Grid>

中间行是Auto高度，VerticalOptions="End"让Pin的底部和中间行底部对齐，而中间行正好在屏幕垂直中心，这样尖端就精准对准地图中心了。

内容的提问来源于stack exchange，提问作者Bandi Tóth