Flutter实现非地图式用户位置获取与容器内位置关系展示方案

核心思路：地理空间到屏幕空间的映射 #

把实际米级距离按比例转换成屏幕像素，以自身位置为屏幕中心（原点），根据其他用户的相对方位+距离计算屏幕坐标，用Stack组件定位所有用户容器即可实现无地图的位置关系展示。

关键步骤 #

1. 固定自身位置到屏幕中央
   通过MediaQuery获取屏幕尺寸，计算中心坐标，将代表自身的容器固定在该位置。
2. 定义缩放比例
   设定实际距离与屏幕像素的对应关系，比如1米 = 8像素（可根据屏幕大小动态调整，平板可适当放大比例）。
3. 计算相对方位与屏幕坐标
   仅知道距离不够，还需通过经纬度算出其他用户相对自身的方位角（0°=北，90°=东，180°=南，270°=西）：
   • 若用户在自身正左侧10米：屏幕X坐标 = 中心X - (10 × 缩放比例)，Y坐标与中心一致
   • 若用户在左前方10米：结合方位角用三角函数计算X/Y偏移量（比如270°对应正西，偏移量仅在X轴负方向）
4. 用Stack定位所有用户容器
   将每个用户容器作为Stack的子组件，通过Positioned组件设置计算好的left和top值。

代码示例 #

假设已获取其他用户的相对距离和方位角：

import 'package:flutter/material.dart';

class UserPositionDisplay extends StatefulWidget {
  const UserPositionDisplay({super.key});

  @override
  State<UserPositionDisplay> createState() => _UserPositionDisplayState();
}

class _UserPositionDisplayState extends State<UserPositionDisplay> {
  // 缩放比例：1米对应8像素
  final double scale = 8;
  // 自身屏幕坐标（中心）
  late Offset selfPosition;

  // 模拟其他用户数据：距离（米）、方位角（0=北，90=东，180=南，270=西）
  final List<Map<String, dynamic>> otherUsers = [
    {'distance': 10, 'azimuth': 270}, // 左侧10米
    {'distance': 15, 'azimuth': 0},   // 正前方15米
    {'distance': 8, 'azimuth': 90},   // 右侧8米
  ];

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 计算屏幕中心坐标
    final screenSize = MediaQuery.of(context).size;
    selfPosition = Offset(screenSize.width / 2, screenSize.height / 2);
  }

  // 根据距离和方位角计算屏幕坐标
  Offset calculateUserPosition(double distance, double azimuth) {
    // 将方位角转为弧度
    final radians = azimuth * (3.14159 / 180);
    // 屏幕Y轴向下，所以北方向对应Y轴负偏移
    final dx = distance * scale * sin(radians);
    final dy = -distance * scale * cos(radians);
    return selfPosition + Offset(dx, dy);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 自身位置容器（屏幕中央）
          Positioned(
            left: selfPosition.dx - 25, // 容器宽50，偏移25实现居中
            top: selfPosition.dy - 25,
            child: Container(
              width: 50,
              height: 50,
              decoration: const BoxDecoration(
                color: Colors.blue,
                shape: BoxShape.circle,
              ),
              child: const Center(child: Text('我', style: TextStyle(color: Colors.white))),
            ),
          ),
          // 其他用户容器
          ...otherUsers.map((user) {
            final pos = calculateUserPosition(user['distance'], user['azimuth']);
            return Positioned(
              left: pos.dx - 20, // 容器宽40，偏移20实现居中
              top: pos.dy - 20,
              child: Container(
                width: 40,
                height: 40,
                decoration: const BoxDecoration(
                  color: Colors.red,
                  shape: BoxShape.circle,
                ),
                child: Center(child: Text('${user['distance']}m', style: TextStyle(color: Colors.white, fontSize: 10))),
              ),
            );
          }).toList(),
        ],
      ),
    );
  }
}

补充说明 #

• 若未实现方位角计算，可通过经纬度用公式或latlong2库的bearingBetween方法获取两点间方位角。
• 可根据屏幕尺寸动态调整缩放比例，避免小屏上用户容器重叠。
• 若用户位置超出屏幕，可添加边界判断，显示指向屏幕外的箭头或自动缩放整个视图。

内容的提问来源于stack exchange，提问作者Juan Sin Miedo