Flutter地图与定位服务教程

Flutter 提供了多种插件来实现地图和定位服务，其中最常用的是 google_maps_flutter 和 geolocator 插件。以下是一个简单的教程，展示如何在 Flutter 应用中集成地图和定位服务。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 google_maps_flutter 和 geolocator 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.1.1
  geolocator: ^7.6.2

然后运行 flutter pub get 来安装依赖。

2. 配置 Google Maps API

要使用 Google Maps，你需要在 Google Cloud Platform 上启用 Google Maps API，并获取一个 API 密钥。将 API 密钥添加到 android/app/src/main/AndroidManifest.xml 文件中：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">
    <application
        android:label="Your App"
        android:icon="@mipmap/ic_launcher">
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="YOUR_API_KEY"/>
    </application>
</manifest>

3. 创建地图页面

在 lib/main.dart 中创建一个简单的地图页面：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:geolocator/geolocator.dart';

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  GoogleMapController? mapController;
  LatLng? currentLocation;

  @override
  void initState() {
    super.initState();
    _getCurrentLocation();
  }

  Future<void> _getCurrentLocation() async {
    bool serviceEnabled = await Geolocator.isLocationServiceEnabled();
    if (!serviceEnabled) {
      return;
    }

    LocationPermission permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
      if (permission == LocationPermission.denied) {
        return;
      }
    }

    Position position = await Geolocator.getCurrentPosition();
    setState(() {
      currentLocation = LatLng(position.latitude, position.longitude);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Map & Location'),
      ),
      body: currentLocation == null
          ? Center(child: CircularProgressIndicator())
          : GoogleMap(
              initialCameraPosition: CameraPosition(
                target: currentLocation!,
                zoom: 14.0,
              ),
              onMapCreated: (GoogleMapController controller) {
                mapController = controller;
              },
              markers: {
                Marker(
                  markerId: MarkerId('currentLocation'),
                  position: currentLocation!,
                ),
              },
            ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MapScreen(),
  ));
}

4. 运行应用

现在你可以运行应用，查看地图并定位到当前设备的位置。

5. 处理权限

在 Android 和 iOS 上，你需要处理位置权限。确保在 AndroidManifest.xml 和 Info.plist 中添加相应的权限声明。

总结

通过 google_maps_flutter 和 geolocator 插件，你可以轻松地在 Flutter 应用中集成地图和定位服务。你可以进一步扩展这个示例，添加更多功能，如标记、路线规划等。