如何在Xamarin Forms Google Maps中显示Pin列表？动态添加仅显示单个Pin

看起来你遇到了动态添加Pin只显示一个的坑，我帮你梳理下常见问题和解决办法：

1. 核心问题：用错了集合类型与对象类型 #

你当前的代码里用了List<Position>，但Maps控件需要的是**Pin对象的可观察集合**——普通List不会自动通知UI更新，而且Position只是坐标，不是可直接渲染的Pin元素。

修正后的ViewModel代码 #

using System.Collections.ObjectModel;
using Xamarin.Forms.Maps;
using Prism.Mvvm; // 如果你用的是Prism的BindableBase

public class LocationPageViewModel : BindableBase 
{
    // 改为ObservableCollection<Pin>，支持UI自动更新
    public ObservableCollection<Pin> MapPins { get; set; }
    public Position MabPosition { get; set; }

    public LocationPageViewModel() 
    {
        MabPosition = new Position(24.774265, 46.738586);
        MapPins = new ObservableCollection<Pin>();
        
        // 逐个创建Pin对象并添加
        MapPins.Add(new Pin
        {
            Position = new Position(24.774265, 46.738586),
            Label = "地标1",
            Address = "沙特阿拉伯利雅得附近"
        });
        
        MapPins.Add(new Pin
        {
            Position = new Position(24.928899, 46.376939),
            Label = "地标2",
            Address = "沙特阿拉伯达曼附近"
        });
    }
}

2. 检查XAML绑定是否正确 #

确保你的Map控件的ItemsSource直接绑定到MapPins集合，同时如果需要定位到初始位置，要把Position转成MapSpan类型（需要一个值转换器）：

XAML示例 #

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.LocationPage">
    <ContentPage.Resources>
        <!-- 添加坐标转区域的转换器 -->
        <local:PositionToRegionConverter x:Key="PositionToRegionConverter"/>
    </ContentPage.Resources>
    
    <maps:Map MapType="Street"
              ItemsSource="{Binding MapPins}"
              IsShowingUser="True"
              MoveToRegion="{Binding MabPosition, Converter={StaticResource PositionToRegionConverter}}">
    </maps:Map>
</ContentPage>

对应的转换器代码 #

using Xamarin.Forms;
using Xamarin.Forms.Maps;

public class PositionToRegionConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is Position pos)
        {
            // 以坐标为中心，显示半径10公里范围的区域
            return MapSpan.FromCenterAndRadius(pos, Distance.FromKilometers(10));
        }
        return null;
    }

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

3. 确保ViewModel绑定上下文正确 #

在页面的构造函数里，必须把BindingContext设置为你的ViewModel实例：

public LocationPage()
{
    InitializeComponent();
    BindingContext = new LocationPageViewModel();
}

4. 后续API获取数据的注意事项 #

当你从Web API异步获取坐标后，要在主线程更新MapPins集合（UI操作必须在主线程执行）：

// 假设从API获取到了Position列表
foreach (var apiPos in fetchedPositions)
{
    Device.BeginInvokeOnMainThread(() =>
    {
        MapPins.Add(new Pin
        {
            Position = apiPos,
            Label = $"API地标 {apiPos.Latitude:F2},{apiPos.Longitude:F2}",
            Address = "从Web API加载"
        });
    });
}

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