寻求Flutter应用中Google Maps免费替代地图小部件方案

以下是两个满足你需求的免费内嵌地图方案，均可结合geolocator获取的坐标实现实时位置显示：

1. Flutter Map（基于OpenStreetMap，完全免费开源） #

这是最适配你需求的方案，无内嵌使用限制，完全基于免费的OpenStreetMap数据源，支持所有主流平台。

实现步骤： #

• 添加依赖到pubspec.yaml：

  dependencies:
    flutter_map: ^6.1.0
    latlong2: ^0.9.0 # 用于处理经纬度坐标转换
    geolocator: ^10.1.0 # 你已集成的定位包
  

• 执行flutter pub get完成依赖安装

核心代码示例（实时显示用户位置）： #

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

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

  @override
  State<LiveUserMap> createState() => _LiveUserMapState();
}

class _LiveUserMapState extends State<LiveUserMap> {
  late LatLng _userLocation;
  late StreamSubscription<Position> _locationSubscription;
  final MapController _mapController = MapController();

  @override
  void initState() {
    super.initState();
    _fetchInitialLocation();
    _startLocationUpdates();
  }

  Future<void> _fetchInitialLocation() async {
    final position = await Geolocator.getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high,
    );
    setState(() {
      _userLocation = LatLng(position.latitude, position.longitude);
    });
    _mapController.move(_userLocation, 15.0); // 初始定位到用户位置
  }

  void _startLocationUpdates() {
    _locationSubscription = Geolocator.getPositionStream(
      locationSettings: const LocationSettings(
        accuracy: LocationAccuracy.high,
        distanceFilter: 10, // 移动超过10米时更新位置
      ),
    ).listen((Position newPosition) {
      setState(() {
        _userLocation = LatLng(newPosition.latitude, newPosition.longitude);
      });
      // 可选：自动跟随用户移动
      _mapController.move(_userLocation, _mapController.zoom);
    });
  }

  @override
  void dispose() {
    _locationSubscription.cancel();
    _mapController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      mapController: _mapController,
      options: MapOptions(
        initialCenter: _userLocation,
        initialZoom: 15.0,
      ),
      children: [
        // 加载OpenStreetMap瓦片
        TileLayer(
          urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          subdomains: const ['a', 'b', 'c'],
          userAgentPackageName: 'com.your.app.package', // 替换为你的应用包名
        ),
        // 用户位置标记
        MarkerLayer(
          markers: [
            Marker(
              width: 80,
              height: 80,
              point: _userLocation,
              builder: (_) => const Icon(
                Icons.my_location,
                color: Colors.red,
                size: 40,
              ),
            ),
          ],
        ),
      ],
    );
  }
}

2. Mapbox Maps Flutter（免费额度内使用） #

如果你需要更丰富的地图样式（如自定义瓦片、3D视图），可以选择Mapbox。它提供免费额度（每月5万次地图加载、10万次定位请求），足够小型应用使用。

注意事项： #

• 需要注册Mapbox账号获取访问令牌
• 免费额度用完后需付费升级，但小型应用基本不会触发上限

核心思路： #

通过geolocator获取坐标后，调用Mapbox的API更新地图相机位置和用户标记，实现逻辑和Flutter Map类似，仅组件API略有差异。

内容的提问来源于stack exchange，提问作者pete more