如何在基于MVVM架构的Xamarin项目中实现SfMap功能

前置配置 #

• 权限声明：Android端在AndroidManifest.xml中添加ACCESS_FINE_LOCATION、ACCESS_COARSE_LOCATION权限；iOS端在Info.plist中添加定位权限描述NSLocationWhenInUseUsageDescription、NSLocationAlwaysAndWhenInUseUsageDescription
• 安装依赖NuGet包：Syncfusion.Xamarin.SfMaps、Xamarin.Essentials

1. 核心ViewModel实现 #

需继承INotifyPropertyChanged接口实现属性变更通知，核心逻辑包含定位获取、拖拽事件处理两个部分：

using Syncfusion.SfMaps.XForms;
using Xamarin.Essentials;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Input;

public class MapPageViewModel : INotifyPropertyChanged
{
    private MapLatLng _currentLocation;
    /// <summary>
    /// 当前定位坐标，双向绑定
    /// </summary>
    public MapLatLng CurrentLocation
    {
        get => _currentLocation;
        set 
        { 
            _currentLocation = value; 
            OnPropertyChanged(); 
        }
    }

    /// <summary>
    /// 地图标记点集合，绑定到SfMaps的Markers属性
    /// </summary>
    public ObservableCollection<MapMarker> MapMarkers { get; set; } = new ObservableCollection<MapMarker>();

    /// <summary>
    /// 获取当前定位命令
    /// </summary>
    public ICommand GetCurrentLocationCommand { get; }

    /// <summary>
    /// 标记点拖拽结束处理命令
    /// </summary>
    public ICommand MarkerDragEndCommand { get; }

    public MapPageViewModel()
    {
        GetCurrentLocationCommand = new Command(async () => await LoadCurrentLocation());
        MarkerDragEndCommand = new Command<MarkerDraggingEndedEventArgs>(HandleMarkerDragEnd);
    }

    /// <summary>
    /// 调用定位接口获取当前设备坐标，展示标记点
    /// </summary>
    private async Task LoadCurrentLocation()
    {
        var location = await Geolocation.GetLastKnownLocationAsync();
        if (location == null)
        {
            location = await Geolocation.GetLocationAsync(new GeolocationRequest(GeolocationAccuracy.High, TimeSpan.FromSeconds(10)));
        }

        if (location != null)
        {
            CurrentLocation = new MapLatLng(location.Latitude, location.Longitude);
            MapMarkers.Clear();
            MapMarkers.Add(new MapMarker 
            { 
                Latitude = CurrentLocation.Latitude, 
                Longitude = CurrentLocation.Longitude 
            });
        }
    }

    /// <summary>
    /// 处理标记点拖拽结束逻辑，更新当前定位
    /// </summary>
    private void HandleMarkerDragEnd(MarkerDraggingEndedEventArgs e)
    {
        CurrentLocation = e.NewPosition;
        // 更新标记点坐标
        if (MapMarkers.Any())
        {
            MapMarkers[0].Latitude = e.NewPosition.Latitude;
            MapMarkers[0].Longitude = e.NewPosition.Longitude;
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. XAML页面绑定配置 #

注意需开启MapMarkerSettings的EnableDrag属性，否则标记点无法拖拽

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maps="clr-namespace:Syncfusion.SfMaps.XForms;assembly=Syncfusion.SfMaps.XForms"
             xmlns:behaviors="http://xamarin.com/schemas/2020/forms"
             x:Class="YourNamespace.MapPage"
             BindingContext="{Binding MapPageViewModel, Source={StaticResource ViewModelLocator}}">
    <ContentPage.Content>
        <maps:SfMaps>
            <maps:SfMaps.Layers>
                <maps:ShapeFileLayer Uri="world-map.shp">
                    <!-- 开启标记点拖拽 -->
                    <maps:ShapeFileLayer.MarkerSettings>
                        <maps:MapMarkerSettings EnableDrag="True" MarkerHeight="30" MarkerWidth="20" />
                    </maps:ShapeFileLayer.MarkerSettings>
                    <!-- 绑定标记点集合 -->
                    <maps:ShapeFileLayer.Markers ItemsSource="{Binding MapMarkers}" />
                    <!-- 绑定拖拽结束事件到ViewModel命令 -->
                    <maps:ShapeFileLayer.Behaviors>
                        <behaviors:EventToCommandBehavior 
                            EventName="MarkerDraggingEnded"
                            Command="{Binding MarkerDragEndCommand}"
                            EventArgsParameterPath="EventArgs" />
                    </maps:ShapeFileLayer.Behaviors>
                </maps:ShapeFileLayer>
            </maps:SfMaps.Layers>
        </maps:SfMaps>
        <!-- 可添加按钮触发获取定位逻辑 -->
        <Button Text="获取当前定位" Command="{Binding GetCurrentLocationCommand}" VerticalOptions="End" HorizontalOptions="Center" Margin="0,0,0,20"/>
    </ContentPage.Content>
</ContentPage>

补充说明 #

• 如果不需要使用内置shape地图，可替换为OSM瓦片层，标记点和拖拽功能不受影响
• 若使用的是Prism等MVVM框架，事件绑定可直接使用框架内置的EventToCommand实现，无需额外转换器

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