Flutter地图自动完成搜索插件map_autocomplete_field的使用

当然，以下是如何在Flutter中使用map_autocomplete_field插件来实现地图自动完成搜索功能的示例代码。这个插件允许用户在地图上输入地点名称，并自动完成搜索，同时展示搜索结果。

首先，你需要在pubspec.yaml文件中添加map_autocomplete_field依赖：

dependencies:
  flutter:
    sdk: flutter
  map_autocomplete_field: ^最新版本号  # 请替换为实际的最新版本号

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

接下来是主要的Dart代码部分。我们将创建一个简单的Flutter应用，其中包括一个自动完成搜索字段，用于搜索和选择地点。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Map Autocomplete Field Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _controller = TextEditingController();
  LatLng? _selectedLocation;
  List<Prediction>? _predictions;
  GoogleMapController? _mapController;
  final _key = GlobalKey<MapAutocompleteFieldState>();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _onPlaceSelected(Prediction prediction) async {
    final addresses = await Geocoder.local().fromPlacemark(Placemark.fromMap({
      'name': prediction.description ?? '',
      'locality': prediction.terms?.firstOrNullObject(where: { term -> term.type == "locality" })?.value,
      'postalCode': prediction.terms?.firstOrNullObject(where: { term -> term.type == "postal_code" })?.value,
      'route': prediction.terms?.firstOrNullObject(where: { term -> term.type == "route" })?.value,
      'country': prediction.terms?.firstOrNullObject(where: { term -> term.type == "country" })?.value,
      'administrativeArea': prediction.terms?.firstOrNullObject(where: { term -> term.type == "administrative_area_level_1" })?.value,
    }));

    if (addresses.isNotEmpty) {
      final location = addresses.first.location;
      setState(() {
        _selectedLocation = LatLng(location.latitude, location.longitude);
      });

      // Move the camera to the selected location
      _mapController?.animateCamera(CameraUpdate.newLatLngZoom(LatLng(location.latitude, location.longitude), 15));
    }
  }

  void _onPredictionReceived(List<Prediction> predictions) {
    setState(() {
      _predictions = predictions;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map Autocomplete Field Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            MapAutocompleteField(
              apiKey: 'YOUR_GOOGLE_MAPS_API_KEY',  // 请替换为你的Google Maps API密钥
              controller: _controller,
              key: _key,
              onPredictionReceived: _onPredictionReceived,
              onPlaceSelected: _onPlaceSelected,
              style: TextStyle(fontSize: 18),
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Search Place',
                suffixIcon: IconButton(
                  icon: Icon(Icons.clear),
                  onPressed: () {
                    _controller.clear();
                    _key.currentState?.clearSuggestions();
                  },
                ),
              ),
            ),
            SizedBox(height: 20),
            if (_selectedLocation != null)
              GoogleMap(
                mapType: MapType.normal,
                initialCameraPosition: CameraPosition(
                  target: _selectedLocation!,
                  zoom: 15,
                ),
                onMapCreated: (GoogleMapController controller) {
                  _mapController = controller;
                },
                markers: Set.from([
                  Marker(
                    markerId: MarkerId('selectedLocation'),
                    position: _selectedLocation!,
                  ),
                ]),
              ),
          ],
        ),
      ),
    );
  }
}

注意事项

1. Google Maps API Key：确保你已经获取了Google Maps API密钥，并将其替换为YOUR_GOOGLE_MAPS_API_KEY。
2. 依赖库：这个示例使用了geocoding和geolocator库来处理地理编码和定位，以及google_maps_flutter来显示地图。你可能需要在pubspec.yaml中添加这些依赖项。
3. 权限：在Android和iOS上，你需要配置必要的权限来使用地理位置和访问互联网。

这是一个基本的实现，你可以根据需要进行进一步的自定义和扩展。