如何在Xamarin Forms谷歌地图中实现Pin实时旋转？

嘿，这个需求我之前帮开发者解决过不少次——Xamarin.Forms默认的谷歌地图Pin确实没有直接支持旋转的属性，但咱们通过自定义Pin类+平台专属渲染器就能完美搞定，一步步来：

第一步：在PCL项目中创建自定义Pin类 #

首先咱们需要扩展原生的Pin，添加一个可绑定的Rotation属性，这样就能接收PCL传来的实时参数并自动触发UI更新：

using Xamarin.Forms.Maps;

public class RotatablePin : Pin
{
    public static readonly BindableProperty RotationProperty =
        BindableProperty.Create(nameof(Rotation), typeof(double), typeof(RotatablePin), 0.0,
            propertyChanged: OnRotationChanged);

    public double Rotation
    {
        get => (double)GetValue(RotationProperty);
        set => SetValue(RotationProperty, value);
    }

    private static void OnRotationChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var pin = bindable as RotatablePin;
        pin?.OnPropertyChanged(nameof(Rotation));
    }
}

第二步：安卓平台自定义渲染器 #

安卓的Google Maps Marker本身就自带Rotation属性，咱们只需要把自定义Pin的Rotation值同步过去就行：

在安卓项目中添加渲染器类，记得加上特性标记让Xamarin识别：

using Android.Gms.Maps;
using Android.Gms.Maps.Model;
using Xamarin.Forms.Maps;
using Xamarin.Forms.Maps.Android;

[assembly: ExportRenderer(typeof(RotatablePin), typeof(RotatablePinRenderer))]
namespace YourAppNamespace.Droid.Renderers
{
    public class RotatablePinRenderer : PinRenderer, IOnMapReadyCallback
    {
        private GoogleMap _googleMap;
        private Marker _marker;
        private RotatablePin _rotatablePin;

        protected override void OnElementChanged(ElementChangedEventArgs<Pin> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null)
            {
                ((RotatablePin)e.OldElement).PropertyChanged -= OnPinPropertyChanged;
            }

            if (e.NewElement != null)
            {
                _rotatablePin = (RotatablePin)e.NewElement;
                _rotatablePin.PropertyChanged += OnPinPropertyChanged;

                var mapView = Control as MapView;
                mapView?.GetMapAsync(this);
            }
        }

        public void OnMapReady(GoogleMap googleMap)
        {
            _googleMap = googleMap;
            UpdateMarkerRotation();
        }

        protected override MarkerOptions CreateMarker(Pin pin)
        {
            var options = base.CreateMarker(pin);
            options.Rotation((float)_rotatablePin.Rotation);
            return options;
        }

        private void OnPinPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName == nameof(RotatablePin.Rotation))
            {
                UpdateMarkerRotation();
            }
        }

        private void UpdateMarkerRotation()
        {
            if (_marker == null && _googleMap != null)
            {
                foreach (var marker in _googleMap.Markers)
                {
                    if (marker.Title == _rotatablePin.Label && marker.Snippet == _rotatablePin.Address)
                    {
                        _marker = marker;
                        break;
                    }
                }
            }

            _marker?.SetRotation((float)_rotatablePin.Rotation);
        }
    }
}

第三步：iOS平台自定义渲染器 #

iOS的MKAnnotationView没有直接的Rotation属性，但可以通过CGAffineTransform来实现旋转效果：

同样在iOS项目中添加渲染器类：

using MapKit;
using Xamarin.Forms.Maps;
using Xamarin.Forms.Maps.iOS;

[assembly: ExportRenderer(typeof(RotatablePin), typeof(RotatablePinRenderer))]
namespace YourAppNamespace.iOS.Renderers
{
    public class RotatablePinRenderer : PinRenderer
    {
        private RotatablePin _rotatablePin;
        private MKAnnotationView _annotationView;

        protected override void OnElementChanged(ElementChangedEventArgs<Pin> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null)
            {
                ((RotatablePin)e.OldElement).PropertyChanged -= OnPinPropertyChanged;
            }

            if (e.NewElement != null)
            {
                _rotatablePin = (RotatablePin)e.NewElement;
                _rotatablePin.PropertyChanged += OnPinPropertyChanged;
            }
        }

        protected override MKAnnotationView GetViewForAnnotation(MKMapView mapView, IMKAnnotation annotation)
        {
            _annotationView = base.GetViewForAnnotation(mapView, annotation);
            UpdateAnnotationRotation();
            return _annotationView;
        }

        private void OnPinPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName == nameof(RotatablePin.Rotation))
            {
                UpdateAnnotationRotation();
            }
        }

        private void UpdateAnnotationRotation()
        {
            if (_annotationView != null)
            {
                // iOS需要把角度转成弧度
                var rotationRadians = (nfloat)(_rotatablePin.Rotation * System.Math.PI / 180);
                _annotationView.Transform = CoreGraphics.CGAffineTransform.MakeRotation(rotationRadians);
            }
        }
    }
}

第四步：在PCL中使用并绑定实时参数 #

现在你可以在XAML或代码中使用RotatablePin，并把实时参数绑定到它的Rotation属性：

XAML示例： #

<maps:Map x:Name="MyMap">
    <local:RotatablePin Label="My Rotating Pin"
                        Address="Test Location"
                        Position="{Binding PinPosition}"
                        Rotation="{Binding RealTimeRotationValue}" />
</maps:Map>

代码后台/ViewModel示例： #

假设你的ViewModel实现了INotifyPropertyChanged，只需要更新RealTimeRotationValue属性，Pin就会自动旋转：

// ViewModel中的属性
private double _realTimeRotationValue;
public double RealTimeRotationValue
{
    get => _realTimeRotationValue;
    set
    {
        _realTimeRotationValue = value;
        OnPropertyChanged();
    }
}

// 模拟实时参数更新（比如每秒旋转10度）
private void SimulateRealTimeUpdate()
{
    RealTimeRotationValue = (RealTimeRotationValue + 10) % 360;
}

这样一来，当PCL中的实时参数变化时，Pin就会自动同步旋转角度啦！注意安卓的Marker旋转是顺时针角度，iOS转成弧度后也是顺时针，保持逻辑一致即可。

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