Flutter 地图搜索插件 search_map 的使用

Flutter Search Map

一个集成 Google Maps Places API 的 Flutter 包，提供带有自动完成和地点详情检索的位置搜索字段。此包简化了添加基于地图的搜索功能，带有平滑的动画叠加层，无缝处理用户交互。

关键特性

• Google Places 自动完成：获取实时地址建议。
• 地点详情检索：获取任何选定地点的详细信息（名称、地址、坐标）。
• 平滑动画叠加层：搜索结果以平滑的淡入淡出和滑动动画显示和消失。
• 防抖搜索：通过内置防抖减少冗余的 API 调用。
• 动态叠加层宽度：叠加层与文本字段的宽度匹配，并有 3 像素的垂直偏移，以完美对齐。
• 可自定义的叠加层和图标：使用动态显示搜索结果的自定义选项和 Font Awesome 图标。
• 本地化支持：使用 easy_localization 支持多种语言。
• 清除按钮与叠加层管理：当搜索被清除时，自动隐藏叠加层。
• 会话管理：高效管理 API 会话以优化性能并最小化成本。

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies: 
  search_map: any

开始使用

1. 创建一个 Google Cloud 项目并启用 Places API。
2. 从 Google Cloud 控制台生成 API 密钥。
3. 将你的 API 密钥添加到小部件配置中。

使用

import 'package:search_map/search_map.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Search Map Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: SearchMap(
            apiKey: 'YOUR_API_KEY',
            focusNode: FocusNode(),
            onClickAddress: (placeDetails) {
              print('Selected: ${placeDetails.description}');
            },
          ),
        ),
      ),
    );
  }
}

自定义

• 自定义叠加层样式：使用 overlayStyle 参数来自定义叠加层的外观。
• 本地化：使用 easy_localization 支持多种语言。
• 防抖时间：使用 debounceTime 调整防抖时间，以平衡性能和响应性。
• 图标集成：使用 font_awesome_flutter 添加搜索图标。
• 会话管理：使用 sessionManager 高效管理 API 会话。
• 错误处理：使用 onError 回调优雅地处理错误。

示例代码

import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:search_map/search_map.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();

  runApp(
    EasyLocalization(
      supportedLocales: [Locale('en'), Locale('es'), Locale('ar')],
      path: 'assets/langs',
      fallbackLocale: Locale('en'),
      child: MyApp(),
    ),
  );
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  FocusNode focusNode = FocusNode();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      home: Scaffold(
        appBar: AppBar(title: const Text('Search Map Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: SearchMap(
            apiKey: 'YOUR_API_KEY',
            focusNode: focusNode,
            decoration: const InputDecoration(
              hintText: 'Search for a location',
            ),
            onClickAddress: (placeDetails) {
              print('Selected Place: ${placeDetails.toJson()}');
              focusNode.unfocus();
            },
          ),
        ),
      ),
    );
  }
}