Flutter实时公交监控应用：OpenStreetMap下用户移动实时定位问题咨询

一、捕获用户移动过程中的实时位置 #

推荐使用geolocator包实现位置监听，以下是具体步骤：

1. 添加依赖
   在pubspec.yaml中加入：

dependencies:
  geolocator: ^10.1.0

2. 配置平台权限

• Android：在AndroidManifest.xml中添加权限

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" /> <!-- 后台定位需要 -->

• iOS：在Info.plist中添加

<key>NSLocationWhenInUseUsageDescription</key>
<string>需要获取您的位置以提供实时公交监控服务</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>后台需要获取您的位置以持续监控公交动态</string>

3. 实现实时位置监听

import 'package:geolocator/geolocator.dart';

class LocationService {
  Stream<Position>? _positionStream;

  // 请求权限并启动监听
  Future<void> startLocationUpdates() async {
    LocationPermission permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
      if (permission == LocationPermission.denied) return;
    }

    // 配置监听参数：距离移动10米或时间间隔5秒更新一次
    _positionStream = Geolocator.getPositionStream(
      locationSettings: LocationSettings(
        accuracy: LocationAccuracy.high,
        distanceFilter: 10,
        interval: 5000,
      ),
    );

    // 监听位置变化
    _positionStream?.listen((Position position) {
      // 这里处理实时位置数据，比如更新地图上的用户标记
      print("实时位置：${position.latitude}, ${position.longitude}");
    });
  }

  // 停止监听
  void stopLocationUpdates() {
    _positionStream?.cancel();
  }
}

二、集成OpenStreetMap到Flutter应用 #

使用flutter_map包实现OSM集成，以下是基础实现和结合实时位置的示例：

1. 添加依赖
   在pubspec.yaml中加入：

dependencies:
  flutter_map: ^6.1.0
  latlong2: ^0.9.0 # 处理经纬度

2. 基础地图展示与实时位置标记

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:geolocator/geolocator.dart';

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

  @override
  State<BusMonitorMap> createState() => _BusMonitorMapState();
}

class _BusMonitorMapState extends State<BusMonitorMap> {
  LatLng _userLocation = LatLng(39.9042, 116.4074); // 默认北京坐标
  final MapController _mapController = MapController();
  LocationService? _locationService;

  @override
  void initState() {
    super.initState();
    _locationService = LocationService();
    _startLocationTracking();
  }

  void _startLocationTracking() async {
    await _locationService?.startLocationUpdates();
    // 监听位置变化并更新UI
    _locationService?._positionStream?.listen((Position position) {
      setState(() {
        _userLocation = LatLng(position.latitude, position.longitude);
      });
      // 可选：自动跟随用户位置
      _mapController.move(_userLocation, _mapController.zoom);
    });
  }

  @override
  void dispose() {
    _locationService?.stopLocationUpdates();
    _mapController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      mapController: _mapController,
      options: MapOptions(
        initialCenter: _userLocation,
        initialZoom: 15,
      ),
      children: [
        // OSM瓦片图层
        TileLayer(
          urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          subdomains: const ['a', 'b', 'c'],
        ),
        // 用户位置标记
        MarkerLayer(
          markers: [
            Marker(
              point: _userLocation,
              width: 40,
              height: 40,
              child: const Icon(
                Icons.person_pin_circle,
                color: Colors.blue,
                size: 40,
              ),
            ),
          ],
        ),
      ],
    );
  }
}

关键说明 #

• flutter_map的TileLayer使用官方OSM瓦片地址，也可以替换为其他OSM服务商的瓦片
• 实时位置更新时，通过setState更新标记坐标，实现地图上的实时位置同步
• 可以根据需求调整定位精度、距离过滤和时间间隔，平衡性能和准确性

内容的提问来源于stack exchange，提问作者Yvette Medrano