.NET MAUI中如何获取地图Pin在Android/iOS上的屏幕位置

核心逻辑 #

Xamarin.Forms 的 Pin 仅存储经纬度这类地理坐标，没有直接提供屏幕位置属性。要获取屏幕坐标，需调用地图控件的平台原生API，将地理坐标转换为屏幕坐标，再以此定位弹窗。

Android 端实现 #

通过自定义依赖服务，借助原生 GoogleMap 的 Projection 类完成坐标转换：

1. 定义Forms层接口 #

public interface IMapLocationConverter
{
    Task<Point> GetPinScreenPosition(Pin pin, Map map);
}

2. Android 端实现依赖服务 #

[assembly: Dependency(typeof(MapLocationConverter_Android))]
namespace YourAppNamespace.Droid
{
    public class MapLocationConverter_Android : IMapLocationConverter
    {
        public async Task<Point> GetPinScreenPosition(Pin pin, Map map)
        {
            await Task.Yield();
            // 获取地图的原生渲染器
            var mapRenderer = Platform.GetRenderer(map) as MapRenderer;
            if (mapRenderer?.NativeMap == null) return new Point(0, 0);

            // 把Pin的经纬度转成原生LatLng对象
            var latLng = new LatLng(pin.Position.Latitude, pin.Position.Longitude);
            // 转换为屏幕坐标
            var nativeScreenPoint = mapRenderer.NativeMap.Projection.ToScreenLocation(latLng);

            // 转成Xamarin.Forms的Point类型返回
            return new Point(nativeScreenPoint.X, nativeScreenPoint.Y);
        }
    }
}

3. 在点击事件中调用 #

async void OnPinClickedAsync(object? sender, PinClickedEventArgs args)
{
    var selectedPin = (Pin)sender;
    // 获取依赖服务实例
    var converter = DependencyService.Get<IMapLocationConverter>();
    // 获取Pin的屏幕位置
    var screenPosition = await converter.GetPinScreenPosition(selectedPin, map);

    // 根据屏幕位置显示弹窗，可根据Pin图标大小调整偏移（比如让弹窗在Pin上方）
    ShowPopup(screenPosition.X + 15, screenPosition.Y - 60);
}

iOS 端实现 #

同样用依赖服务，借助原生 MKMapView 的坐标转换方法：

iOS 端依赖服务实现 #

[assembly: Dependency(typeof(MapLocationConverter_iOS))]
namespace YourAppNamespace.iOS
{
    public class MapLocationConverter_iOS : IMapLocationConverter
    {
        public async Task<Point> GetPinScreenPosition(Pin pin, Map map)
        {
            await Task.Yield();
            var mapRenderer = Platform.GetRenderer(map) as MapRenderer;
            if (mapRenderer?.NativeMap == null) return new Point(0, 0);

            var coordinate = new CLLocationCoordinate2D(pin.Position.Latitude, pin.Position.Longitude);
            // 原生地图的坐标转换方法
            var nativeScreenPoint = mapRenderer.NativeMap.ConvertCoordinateToPoint(coordinate);

            return new Point(nativeScreenPoint.X, nativeScreenPoint.Y);
        }
    }
}

点击事件的调用逻辑与Android端完全一致，直接复用即可。

注意点 #

• 确保地图已完成渲染（比如监听 Map.IsVisible 属性变为 true 后再调用转换），否则可能无法获取原生地图对象
• 弹窗位置需根据Pin图标的实际大小做偏移，默认Pin的锚点在底部，通常需将弹窗上移以避免遮挡Pin本身
• 若使用第三方地图控件（如Bing Maps），需替换为对应平台的原生坐标转换API

内容的提问来源于stack exchange，提问作者Søren Bech