Flutter地点搜索与地图标记更新插件search_map_place_updated的使用

当然，下面是一个关于如何使用 search_map_place_updated 插件来实现 Flutter 应用中的地点搜索与地图标记更新的示例代码。

首先，确保你已经在 pubspec.yaml 文件中添加了 search_map_place_updated 插件的依赖项：

dependencies:
  flutter:
    sdk: flutter
  search_map_place: ^最新版本号  # 请替换为最新版本号
  google_maps_flutter: ^最新版本号  # 请替换为最新版本号

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

接下来是示例代码，它展示了如何使用 search_map_place_updated 插件来搜索地点并在 Google 地图上标记这些地点：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapScreen(),
    );
  }
}

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

class _MapScreenState extends State<MapScreen> {
  Completer<GoogleMapController> _controller = Completer();
  Set<Marker> _markers = Set<Marker>();
  LatLng _center = LatLng(37.7749, -122.4194); // 初始中心位置，例如旧金山
  TextEditingController _searchController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('地点搜索与地图标记'),
      ),
      body: Column(
        children: <Widget>[
          Container(
            height: 50,
            decoration: BoxDecoration(
              color: Colors.grey[200],
              borderRadius: BorderRadius.circular(10),
            ),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextField(
                controller: _searchController,
                decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: '搜索地点',
                  suffixIcon: IconButton(
                    icon: Icon(Icons.search),
                    onPressed: _onSearchPressed,
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            child: GoogleMap(
              mapType: MapType.normal,
              initialCameraPosition: CameraPosition(
                target: _center,
                zoom: 14.0,
              ),
              markers: _markers,
              onMapCreated: (GoogleMapController controller) {
                _controller.complete(controller);
              },
            ),
          ),
        ],
      ),
    );
  }

  Future<void> _onSearchPressed() async {
    String searchResult = _searchController.text;
    if (searchResult.isEmpty) return;

    List<Prediction> predictions = await PlacesAutocomplete.show(
      context: context,
      apiKey: 'YOUR_GOOGLE_MAPS_PLACES_API_KEY', // 请替换为你的 Google Maps Places API Key
      mode: Mode.overlay,
      language: "en",
    );

    if (predictions != null && predictions.isNotEmpty) {
      Prediction firstPrediction = predictions.first;
      String placeId = firstPrediction.placeId;

      PlaceDetails placeDetails = await Places.getDetailsByPlaceId(placeId, apiKey: 'YOUR_GOOGLE_MAPS_PLACES_API_KEY');

      LatLng latLng = LatLng(
        placeDetails.geometry!.location.lat!,
        placeDetails.geometry!.location.lng!,
      );

      setState(() {
        _markers.clear();
        _markers.add(Marker(
          markerId: MarkerId(placeDetails.name!),
          position: latLng,
          infoWindow: InfoWindow(title: placeDetails.name, snippet: placeDetails.vicinity),
        ));
        _center = latLng;
      });

      _controller.future?.animateCamera(CameraUpdate.newLatLngZoom(_center, 16));
    }
  }
}

在这个示例中，我们做了以下几件事情：

1. UI布局：使用 Scaffold、AppBar 和 Column 布局了一个简单的搜索栏和地图视图。
2. 搜索栏：使用 TextField 和 TextEditingController 来处理用户输入的搜索地点。
3. 地点搜索：通过 PlacesAutocomplete.show 方法来显示地点搜索下拉列表，当用户选择一个地点时，获取该地点的详细信息。
4. 地图标记：使用 GoogleMap 和 Marker 来在地图上标记搜索到的地点，并更新地图的中心位置。

请注意，你需要在代码中替换 'YOUR_GOOGLE_MAPS_PLACES_API_KEY' 为你自己的 Google Maps Places API Key。

希望这个示例代码对你有帮助！