Flutter地点搜索与密度展示插件google_maps_place_search_dencity的使用

google_maps_place_search_dencity

Custom Google搜索地点自动完成小部件，带有地标图像和距离计算。

🙋‍ 获取开始

google_maps_place_search_dencity 提供了对Google地方自动完成功能数据库的编程访问，以及地标图像和相对于设备当前位置的距离计算。

💡 特性

帮助您的客户探索他们所在的位置及其周围：

• 地点自动完成功能会自动填充用户输入的地方名称和/或地址。
• 地点地理定位功能可以计算当前位置的距离。
• 地点照片功能返回地方的高质量图像。

🚀 安装

添加依赖

您可以使用以下命令添加 google_maps_place_search_dencity 作为依赖项，并使用最新稳定版本：

$ dart pub add google_maps_place_search_dencity

或者手动将 google_maps_place_search_dencity 添加到 pubspec.yaml 文件的 dependencies 部分：

dependencies:
  google_maps_place_search_dencity: ^replace-with-latest-version

添加图标图像以使包正常工作是必需的。例如：

flutter:
  # 为您的包添加资源，添加一个 assets 部分，如下所示：
  assets:
    - assets/search.png

最新版本是：

最新版本（包括预发布）是：

注意：在升级之前，请查看迁移指南，以了解主要和次要版本可能发生的破坏性更改。

超简单使用

import 'package:google_maps_place_search_dencity/google_maps_place_search_dencity.dart';

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          child: SingleChildScrollView(
            child: GooglePlaceSearchAdvance(
              initialLatitude: 48.8566, // 初始纬度
              initialLongitude: 2.3522, // 初始经度
              googleMapsApiKey: "GOOGLE_MAPS_API_KEY", // Google Maps API 密钥
              lightTheme: false, // 是否启用浅色主题
              country: "fr", // 国家代码
              iconImagePath: "assets/search.png", // 图标路径
              onLocationSelected: (double lat, double lng, String address, 
                                  String mainText, String imageURL) {
                print("Coordinates are $lat,$lng"); // 打印坐标
                print("Address is : $address"); // 打印地址
                print("Image URL is: $imageURL"); // 打印图像URL
                print("Main Text is: $mainText"); // 打印主文本
              },
              focusNode: focusNode!, // 设置焦点节点
            ),
          ),
        ),
      ),
    );
  }
}

🔑 生成应用密钥

1. 前往 Google Maps 平台 > 凭据页面。
2. 在凭据页面上，点击创建凭据 > API 密钥。新创建的 API 密钥对话框会显示您刚刚创建的 API 密钥。
3. 点击关闭。新的 API 密钥将在凭据页面的 API 密钥下列出。（在生产环境中使用之前，请务必限制该 API 密钥。）

👨‍💻 开发者信息

示例代码

以下是完整的示例代码，展示了如何使用 google_maps_place_search_dencity 插件：

// example/lib/main.dart

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

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

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

  // 应用程序根组件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google Maps Place Search 示例',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FocusNode? focusNode;

  // 初始化状态
  initState() {
    super.initState();
    focusNode = FocusNode();
  }

  // 销毁状态
  dispose() {
    focusNode!.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Google Maps 地点搜索'),
        ),
        body: Container(
          padding: EdgeInsets.all(16.0),
          child: SingleChildScrollView(
            child: Column(
              children: [
                GooglePlaceSearchAdvance(
                  initialLatitude: 48.8566, // 初始纬度
                  initialLongitude: 2.3522, // 初始经度
                  googleMapsApiKey: "GOOGLE_MAPS_API_KEY", // Google Maps API 密钥
                  lightTheme: false, // 浅色主题
                  country: "fr", // 国家代码
                  iconImagePath: "assets/search.png", // 图标路径
                  onLocationSelected: (double lat, double lng, String address,
                      String mainText, String imageURL) {
                    print("Coordinates are $lat,$lng"); // 打印坐标
                    print("Address is : $address"); // 打印地址
                    print("Image URL is: $imageURL"); // 打印图像URL
                    print("Main Text is: $mainText"); // 打印主文本
                  },
                  focusNode: focusNode!, // 设置焦点节点
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}