Flutter谷歌地点服务插件flutter_google_places_sdk_http的使用

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

Flutter谷歌地点服务插件flutter_google_places_sdk_http的使用

pub package Tests

flutter_google_places_sdk_http 是 flutter_google_places 的一个基于http实现的插件。

限制

以下方法尚未实现：

  • fetchPlace
  • fetchPlacePhoto

完整示例Demo

首先，确保在 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  flutter_google_places_sdk_http: ^最新版本号

然后，从 Google Cloud Platform 获取 API 密钥，并启用 Places API。

接下来，在您的 Dart 代码中使用该插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Places Demo'),
        ),
        body: Center(
          child: GooglePlacesSearchWidget(),
        ),
      ),
    );
  }
}

class GooglePlacesSearchWidget extends StatefulWidget {
  @override
  _GooglePlacesSearchWidgetState createState() => _GooglePlacesSearchWidgetState();
}

class _GooglePlacesSearchWidgetState extends State<GooglePlacesSearchWidget> {
  final _apiKey = '你的API密钥'; // 在这里替换为你的Google Places API密钥
  final _sessionToken = 'session_token'; // 可以生成一个随机字符串作为会话令牌
  final _types = 'restaurant|cafe'; // 可以根据需要更改类型
  final _radius = 1000; // 半径单位为米
  final _location = '37.7749,-122.4194'; // 位置坐标，经度和纬度用逗号分隔

  Future<void> searchPlaces() async {
    try {
      var places = await FlutterGooglePlacesSdkHttp.searchNearby(
        apiKey: _apiKey,
        sessionToken: _sessionToken,
        location: _location,
        radius: _radius,
        types: _types,
      );

      print('找到的地方列表: $places');
    } catch (e) {
      print('搜索失败: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: searchPlaces,
      child: Text('搜索附近餐厅和咖啡馆'),
    );
  }
}

上述代码展示了如何使用 flutter_google_places_sdk_http 插件搜索附近的餐厅和咖啡馆。点击按钮后，将调用 searchNearby 方法并打印结果。


更多关于Flutter谷歌地点服务插件flutter_google_places_sdk_http的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter谷歌地点服务插件flutter_google_places_sdk_http的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 flutter_google_places_sdk_http 插件在 Flutter 应用中集成谷歌地点服务的示例代码。这个插件允许你通过 HTTP 请求访问 Google Places API，获取地点搜索、自动完成等结果。

首先，确保你的 Flutter 项目已经创建，并且在 pubspec.yaml 文件中添加了 flutter_google_places_sdk_http 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_google_places_sdk_http: ^x.y.z  # 请将 x.y.z 替换为当前最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，你需要配置 Google Places API 密钥。确保你已经在 Google Cloud Console 中启用了 Places API 并创建了 API 密钥。

以下是一个简单的示例代码，展示如何使用 flutter_google_places_sdk_http 插件进行地点搜索：

import 'package:flutter/material.dart';
import 'package:flutter_google_places_sdk_http/flutter_google_places_sdk_http.dart';
import 'dart:convert';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _results = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Places SDK HTTP Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: _searchPlaces,
                child: Text('Search Places'),
              ),
              SizedBox(height: 20),
              Text(_results, style: TextStyle(fontSize: 18)),
            ],
          ),
        ),
      ),
    );
  }

  Future<void> _searchPlaces() async {
    final GooglePlacesApiProvider googlePlaces = GooglePlacesApiProvider(
      apiKey: 'YOUR_GOOGLE_PLACES_API_KEY', // 请替换为你的 API 密钥
    );

    final response = await googlePlaces.autocomplete.get(
      input: 'restaurant in New York',
      locationbias: 'point:lat,lng:40.7128,-74.0060', // 纽约市中心坐标
      radius: '1500', // 搜索半径，单位为米
      type: 'restaurant', // 地点类型
      language: 'en', // 语言
    );

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      setState(() {
        _results = data['predictions'][0]['description'] ?? 'No results found';
      });
    } else {
      setState(() {
        _results = 'Error: ${response.statusCode}';
      });
    }
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，包含一个按钮和一个显示结果的文本区域。当点击按钮时，应用会使用 flutter_google_places_sdk_http 插件调用 Google Places Autocomplete API，搜索纽约市的餐厅，并显示第一个结果。

请注意以下几点：

  1. API 密钥：替换 'YOUR_GOOGLE_PLACES_API_KEY' 为你的实际 API 密钥。
  2. 坐标：locationbias 参数中的坐标是纽约市中心的经纬度，你可以根据需要修改。
  3. 错误处理：示例代码仅简单处理了 HTTP 状态码，实际应用中你可能需要更详细的错误处理逻辑。

这个示例展示了基本的用法，你可以根据需要扩展功能，比如处理更多的搜索结果、添加用户界面元素等。

回到顶部