xamarin 形成 CustomPin ios 渲染

Question

无法将以下列表中的所有引脚显示到视图中。 注意：我下面的示例不是 xamarin 表单文档 的一部分。我的想法是，也许我可以合并两个列表并同时在地图中显示。

1. pin.id==1（主引脚）不断改变其位置，尝试添加不同的图像或颜色
2. 加载地图时，我尝试显示另外 9 个图钉（静态附加图钉），这些图钉不会移动。我再次指定了不同颜色的图像。 结果，一个列表覆盖了另一个列表。所以我要么显示引脚 1，要么显示其他 9 个引脚。但我不能同时将 10 个引脚放入屏幕中。

以下是如何创建第一个静态列表和单个图钉

  public class CustomMap : Map
        {
            public List<CustomPin> AdditionalPins { get; set; }
            public List<CustomPin> CustomPins { get; set; }
           
       
    public CustomMap()
    {
       
        CustomPins = new List<CustomPin>();
        
        AdditionalPins = new List<CustomPin>();
    }

在主页上：两个引脚列表

var customPin = new CustomPin
                                {
                                    PinId = 1,
                                    // Position = new Position(37.7749, -122.4194), // Set the position of the pin
                                    Label = "Custom Pin",
                                    Address = "Custom Address",
                                    Rotation = -45 // Set the rotation angle in degrees
                                };
                                Xamarin.Forms.Device.BeginInvokeOnMainThread(() =>
                                {
                                    customPin.Position = pos;
                                    // pins.Position = pos;
        
                                    if (myMap.Pins.Count == 0)
                                    {
                                        
                                        myMap.Pins.Add(customPin);
                                    
                                    }....

2.静态销钉组

     foreach (var coordinate in coordinates)
                    {
                        var poss = new Position(coordinate.Latitude, coordinate.Longitude);
                        CustomPin additionalPin = new CustomPin
                        {
                            PinId = 20,
                            Label = "Additional Pin",
                            Name = coordinate.StopNumber
                            // Add more properties as needed
                        };
    
                        myMap.AdditionalPins.Add(additionalPin);

现在，我确实得到了两个列表，其中一个有 1 个引脚，每 10 秒更新一次其位置，另一个列表（附加引脚 = 9 组坐标） 在这里，结合两个列表

   private List<CustomPin> GetAllPins(MKPointAnnotation mKPointAnnotation)
        {
            List<CustomPin> matchingPins = new List<CustomPin>();

            if (mKPointAnnotation != null)
            {
                var position = new Position(mKPointAnnotation.Coordinate.Latitude, mKPointAnnotation.Coordinate.Longitude);


                // Check Pins collection
                foreach (var pin in ((CustomMap)Element).Pins)
                {
                   
                        matchingPins.Add(pin as CustomPin);
                        // If a match is found in Pins, no need to check AdditionalPins, break out of the loop
                       
                    
                }

              //  Check AdditionalPins collection only if a match is not found in Pins


                    foreach (var additionalPin in ((CustomMap)Element).AdditionalPins)
                {

                    matchingPins.Add(additionalPin);
                    // If a match is found in AdditionalPins, no need to continue the loop



                }

            }

            return matchingPins;
        }

protected override MKAnnotationView GetViewForAnnotation(MKMapView mapView, IMKAnnotation annotation)
        {
            if (annotation is MKUserLocation)
                return null;
         

            var result = GetAllPins(annotation as MKPointAnnotation); //HERE -- get all the items 
            if (result != null)
            {
                
                List<CustomPin> pins = result;

                if (pins != null && pins.Any())
                {
                    
                    foreach (var D in pins)
                    {
                          if (annotationView == null)
                         {
                         annotationView = new MKAnnotationView(annotation, reuseIdentifier);

                            if (D.PinId == 1) //it gets here the first time 
                            {
                                annotationView.Image = UIImage.FromFile("lilocation.png");
                              
                            }
                            else if (D.PinId == 20) //never assign this part to the view 
                            {
                                annotationView.Image = UIImage.FromFile("red.png");
                            }

                           
                        }
                       
                    }
                }

                    return annotationView;
                
            }

目标是显示列表中的每个项目及其图像和行为。问题是视图仅在第一次时为空。

Answer 1

我不确定为什么你会得到奇怪的结果，但我更喜欢使用 MVVM 模式在地图上显示 Pin 图集合。

您可以使用数据绑定来显示引脚。您可以参考这个：显示图钉收藏。

这是我的小演示。所有需要的数据都在MainPageViewModel中。

<local:CustomMap x:Name="customMap" ItemsSource="{Binding PinsCollection}"
                 MapType="Street">
    <local:CustomMap.ItemTemplate>
        <DataTemplate x:DataType="local:PinData" >
            <local:CustomPin PinId="{Binding PinId}" Name="{Binding PinName}"
                             Label="{Binding PinLabel}"
                             Position="{Binding PinPostion}"/>
        </DataTemplate>
    </local:CustomMap.ItemTemplate>
</local:CustomMap>

因此您可以为您的CustomPin添加一些BindableProperties，例如PinId或其他。

public class CustomPin : Pin
{

    public static readonly BindableProperty PinIdProperty =BindableProperty.Create("PinId", typeof(int), typeof(CustomPin), null);

    public int PinId
    {
        get { return (int)GetValue(PinIdProperty); }
        set { SetValue(PinIdProperty, value); }
    }

您的设计和我的设计之间的差异之一是我不想为自定义引脚和静态引脚创建单独的集合。我想将它们组合起来，因为实际上我们可以使用 PinId 或其他属性来识别它们。

所以在我们的 ViewModel 中，我只创建一个集合，

public class MainPageViewModel
{
    public ObservableCollection<PinData> PinsCollection { get; set; } = new ObservableCollection<PinData>();

    //Add some test data
    public MainPageViewModel()
    {
        PinsCollection.Add(
            new PinData()
            {
                PinId = 0,
                PinName = "CustomPin",
                PinPostion = new Position(37.79752, -122.40183),
                PinLabel = "CustomPin"
            });

        PinsCollection.Add(
            new PinData()
            {
                PinId = 1,
                PinName = "AddtionalPin1",
                PinPostion = new Position(37.80252, -122.40183),
                PinLabel = "AddtionalPin1"
            });
        ...

注意这里的 PinData 是 Model 类。我为它做了一些属性。并且最好实现 INotifyPropertyChanged。然后控制可能会因数据变化而改变。

public class PinData : INotifyPropertyChanged
{

    public string PinName { get; set; }

    public int PinId { get; set; }

    public string PinLabel { get; set; }

    public string PinAddress { get; set; }

    private Position pinPostition;
    public Position PinPostion
    {
        get
        {
            return pinPostition;

        }
        set
        {
            pinPostition = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(PinPostion)));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

以上都是Froms项目的内容。然后我们还可以对渲染器进行一些更改。

例如，我们可以根据 PinId 将不同的图像设置为静态或自定义引脚。

在 CustomMapRenderer

if (annotationView == null) { 注释View = new CustomMKAnnotationView(注释，customPin.Name);

   if (customPin.PinId == 0)
   {
       annotationView.Image = UIImage.FromFile("monkey.png");

   }
   else
   {
       annotationView.Image = UIImage.FromFile("pin.png");
   }

---

好吧，这只是一个小演示，以展示我对您的案例的想法。这就是效果。您可能会看到四个静态紫色别针（未移动）。小猴子会向左下方向移动几秒钟。这是你想要的效果吗？如果您有任何疑问，请告诉我。