Flutter地理位置搜索插件gplaces的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter地理位置搜索插件gplaces的使用

介绍

GPlaces 提供了对Google本地位置和商业信息数据库的编程访问,以及设备当前的位置。

它在Android上使用 Places SDK for Android API,在iOS上使用 Places SDK for iOS API。

功能

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

  • 地点自动补全:用户输入时自动填充地点名称和/或地址。
  • 当前位置:返回用户设备最后已知位置附近的地点列表,并附带每个地点的相关可能性指示。
  • 地点详情:返回并显示有关某个地点的更详细信息。
  • 地点照片:返回高质量的地点图片。

安装

在您的 pubspec.yaml 文件中包含最新版本的 gplaces

dependencies:
  ...
  gplaces: ^0.0.3
  ...

生成应用密钥

  1. 前往 Google Maps Platform > Credentials 页面。
  2. 在凭证页面,点击 创建凭证 > API 密钥。创建API密钥对话框会显示您新创建的API密钥。
  3. 点击关闭。新的API密钥会在凭证页面下的API密钥列表中列出。(请记得在生产环境中限制该API密钥)

对于 Android,将其添加到 AndroidManifest.xml

<application>  
...  
<activity>  
.. </activity>

<meta-data android:name="com.google.android.geo.API_KEY" android:value="PASTE_YOUR_API_KEY_HERE"/>  
...  
</application>  

对于 iOS,将其添加到 Info.plist

<key>GooglePlaceKey</key>
<string>PASTE_YOUR_API_KEY_HERE</string>

文档与示例

  • 查看我们的 GPlace 使用文档
  • 查看我们的 示例 Dart 项目

问题和拉取请求非常欢迎!

示例代码

以下是完整的示例demo代码,展示了如何使用 gplaces 插件:

import 'dart:async';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:gplaces/gplaces.dart';
import 'package:permission_handler/permission_handler.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  final List<AutocompletePrediction> _autocompletePredictions = [];
  final List<PlaceLikelihood> _placeLikelihoods = [];
  Uint8List? _imageBytes;
  late PlacesClient _placesClient;

  [@override](/user/override)
  void initState() {
    _setupClient(); // 初始化客户端
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('gplaces'),
        ),
        body: Column(
          children: [
            Expanded(
              child: Container(
                color: Colors.grey,
                width: double.infinity,
                height: double.infinity,
                child: _imageBytes != null
                    ? Image.memory(_imageBytes!) // 显示获取的照片
                    : const SizedBox.shrink(),
              ),
            ),
            Expanded(
              child: Stack(
                children: [
                  ListView.separated(
                    itemBuilder: (context, index) {
                      return Padding(
                        padding: const EdgeInsets.all(16),
                        child: Text("${_autocompletePredictions[index].description}"), // 显示预测结果
                      );
                    },
                    itemCount: _autocompletePredictions.length,
                    separatorBuilder: (context, index) {
                      return const Divider();
                    },
                  ),
                  ListView.separated(
                    itemBuilder: (context, index) {
                      return Padding(
                        padding: const EdgeInsets.all(16),
                        child: Text("(${_placeLikelihoods[index].likelihood?.toStringAsFixed(2)}): ${_placeLikelihoods[index].place?.address}"), // 显示当前位置的可能性
                      );
                    },
                    itemCount: _placeLikelihoods.length,
                    separatorBuilder: (context, index) {
                      return const Divider();
                    },
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Future fetchAutocompletePredictions() async {
    if (await Places.isInitialized) {
      final request = FindAutocompletePredictionsRequest(
        query: 'Delhi', // 搜索关键词
        countries: ["in"], // 国家过滤器
        origin: LatLng(latitude: 28.3670, longitude: 79.4304), // 起始点
        locationBias: LocationBias(
          southwest: LatLng(latitude: -33.880490, longitude: 151.184363), // 地理位置偏移
          northeast: LatLng(latitude: -33.858754, longitude: 151.229596),
        ),
      );

      _placesClient.findAutoCompletePredictions(request: request).then((response) {
        setState(() {
          _autocompletePredictions.addAll(response?.autocompletePredictions ?? []); // 更新预测结果
        });
      });
    }
  }

  Future fetchPhoto(String placeId) async {
    final placeResponse = await fetchPlace(placeId);
    final metaData = placeResponse?.place?.photoMetadatas;
    if (await Places.isInitialized && metaData != null && metaData.isNotEmpty) {
      final request = FetchPhotoRequest(photoMetaData: metaData[0]); // 请求照片元数据
      _placesClient.fetchPhoto(request: request).then((response) {
        setState(() {
          _imageBytes = response?.imageBytes; // 更新照片
        });
      });
    }
  }

  Future<FetchPlaceResponse?> fetchPlace(String placeId) async {
    if (await Places.isInitialized) {
      final request = FetchPlaceRequest(
        placeId: placeId,
        placeFields: [Field.PHOTO_METADATAS], // 请求照片元数据字段
      );

      return _placesClient.fetchPlace(request: request);
    }

    return null;
  }

  Future findCurrentPlace() async {
    if (await _permissionsGranted && await Places.isInitialized) {
      final request = FindCurrentPlaceRequest(
          placeFields: [Field.ADDRESS, Field.PHOTO_METADATAS, Field.ID]);
      _placesClient.findCurrentPlace(request: request).then((response) {
        setState(() {
          _placeLikelihoods.addAll(response?.placeLikelihoods ?? []); // 更新当前位置可能性
        });
      });
    }
  }

  Future _setupClient() async {
    await Places.initialize(showLogs: true); // 初始化插件
    _placesClient = Places.createClient();
    fetchPlace("ChIJHZyasTQBoDkRj53m5ZpLdSM"); // 获取指定地点的详细信息
    fetchAutocompletePredictions(); // 获取自动补全预测
    fetchPhoto("ChIJHZyasTQBoDkRj53m5ZpLdSM"); // 获取地点照片
    findCurrentPlace(); // 获取当前位置
  }

  Future<bool> get _permissionsGranted async {
    return await Permission.locationWhenInUse.request().isGranted || // 请求位置权限
        await Permission.locationAlways.request().isGranted;
  }
}

更多关于Flutter地理位置搜索插件gplaces的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter地理位置搜索插件gplaces的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter应用中使用gplaces(Google Places)插件来实现地理位置搜索的示例代码。这个插件允许你访问Google Places API,从而可以搜索附近的地点、获取地点详情等。

首先,确保你已经在pubspec.yaml文件中添加了gplaces依赖:

dependencies:
  flutter:
    sdk: flutter
  gplaces: ^0.3.0  # 请检查最新版本号

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

接下来,你需要在Google Cloud Platform上启用Places API,并获取一个API密钥。将这个API密钥添加到你的Flutter应用的配置中,通常是在android/app/src/main/AndroidManifest.xmlios/Runner/Info.plist文件中(确保不要将API密钥硬编码到你的代码中,而是使用环境变量或其他安全方式来管理它)。

以下是一个简单的Flutter应用示例,演示如何使用gplaces插件进行地理位置搜索:

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final _controller = TextEditingController();
  List<Prediction> _predictions = [];

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

  Future<void> _handleSearch() async {
    setState(() {
      _predictions = [];
    });
    final GooglePlaces places = GooglePlaces(apiKey: 'YOUR_API_KEY');

    PredictionResult predictionResult = await places.autocomplete.get(_controller.text);

    if (predictionResult.status == 'OK') {
      setState(() {
        _predictions = predictionResult.predictions;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Places Search'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Search for a place',
                suffixIcon: IconButton(
                  icon: Icon(Icons.search),
                  onPressed: _handleSearch,
                ),
              ),
            ),
            SizedBox(height: 16),
            Expanded(
              child: _predictions.isEmpty
                  ? Center(child: Text('No predictions'))
                  : ListView.builder(
                      itemCount: _predictions.length,
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Text(_predictions[index].description),
                          onTap: () {
                            // Handle tap on prediction (e.g., get place details)
                            print('Selected: ${_predictions[index].description}');
                          },
                        );
                      },
                    ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中:

  1. 我们创建了一个简单的Flutter应用,包含一个文本字段用于输入搜索查询。
  2. 当用户在文本字段中输入内容并点击搜索图标时,_handleSearch函数被调用。
  3. _handleSearch函数使用GooglePlaces类的autocomplete.get方法根据用户输入的内容获取预测结果。
  4. 如果预测结果的状态为OK,则更新状态以显示预测列表。
  5. 预测列表使用ListView.builder进行渲染,每个预测项都是一个可点击的ListTile

请记得将YOUR_API_KEY替换为你从Google Cloud Platform获取的API密钥。此外,确保你已经按照Google Places API的文档设置了正确的账单信息,因为调用API可能会产生费用。

这个示例只是一个起点,你可以根据需要扩展功能,比如获取选中地点的详细信息、在地图上显示地点等。

回到顶部