MAUI地图Pin点击自定义富内容弹窗实现方案问询

可以完全自定义MAUI地图Pin点击后的弹窗，以下是具体实现步骤：

1. 创建自定义弹窗ContentView #

新建CustomPinPopup.xaml文件，定义包含图片、文本等富内容的弹窗布局：

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiNativeMap.Views.CustomPinPopup"
             BackgroundColor="White"
             CornerRadius="8"
             Padding="10"
             WidthRequest="200">
    <VerticalStackLayout>
        <!-- 自定义图片 -->
        <Image Source="pin_detail_image.png" HeightRequest="80" Aspect="AspectFit"/>
        <!-- Pin相关信息 -->
        <Label Text="{Binding Label}" FontSize="Headline" FontAttributes="Bold"/>
        <Label Text="{Binding Address}" FontSize="Caption" TextColor="Gray"/>
        <!-- 自定义操作按钮 -->
        <Button Text="查看详情" Margin="0,10,0,0" HorizontalOptions="Center"/>
    </VerticalStackLayout>
</ContentView>

对应的后台代码（如需逻辑处理）：

namespace MauiNativeMap.Views;

public partial class CustomPinPopup : ContentView
{
    public CustomPinPopup()
    {
        InitializeComponent();
    }
}

2. 修改Map页面布局 #

将原Map.xaml中的地图控件放入Grid容器，预留弹窗叠加位置：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps"
             xmlns:viewmodels="clr-namespace:MauiNativeMap.ViewModels"
             xmlns:views="clr-namespace:MauiNativeMap.Views"
             x:Class="MauiNativeMap.Pages.Map"
             Title="Map">
    <Grid>
        <!-- 地图控件 -->
        <maps:Map MapType="Street" x:Name="MyMap" ItemsSource="{Binding pins}"/>
        
        <!-- 自定义弹窗，默认隐藏 -->
        <views:CustomPinPopup x:Name="PinPopup" IsVisible="False" 
                              HorizontalOptions="Start" VerticalOptions="Start"/>
    </Grid>
</ContentPage>

3. 处理Pin点击事件与弹窗定位 #

修改Map.xaml.cs中的Pin点击逻辑，计算弹窗位置并绑定数据：

public partial class Map : ContentPage
{
    MapViewModel vm => BindingContext as MapViewModel;

    public Map(MapViewModel vm)
    {
        InitializeComponent();
        BindingContext = vm ?? new MapViewModel();
       
        vm.Pins.ForEach(p =>
        {
            MyMap.Pins.Add(p);
            p.MarkerClicked += (s, args) =>
            {
                // 关闭默认弹窗
                args.HideInfoWindow = true;
                
                // 将Pin的地理坐标转换为屏幕坐标
                var pinScreenPos = MyMap.GetScreenCoordinate(p.Location);
                if (pinScreenPos.HasValue)
                {
                    // 调整弹窗位置，避免遮挡Pin图标
                    PinPopup.TranslationX = pinScreenPos.Value.X - PinPopup.Width / 2;
                    PinPopup.TranslationY = pinScreenPos.Value.Y - PinPopup.Height - 20;
                    
                    // 绑定当前Pin的数据到弹窗
                    PinPopup.BindingContext = p;
                    PinPopup.IsVisible = true;
                }
            };
        });

        // 点击地图空白处关闭弹窗
        MyMap.MapClicked += (s, args) => PinPopup.IsVisible = false;
    }

    protected override async void OnAppearing()
    {
        base.OnAppearing();
        await Permissions.RequestAsync<Permissions.LocationWhenInUse>();
        MyMap.MoveToRegion(MapSpan.FromCenterAndRadius(new Location { Latitude = 51, Longitude = 0.2 }, Distance.FromMiles(20)));
    }
}

关键说明 #

• 通过args.HideInfoWindow = true禁用默认的Pin弹窗
• 使用GetScreenCoordinate方法将地理坐标转为屏幕坐标，精准定位弹窗
• 调整TranslationX/Y让弹窗显示在Pin上方，避免遮挡
• 绑定Pin数据到弹窗，实现动态内容展示

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