Flutter地图展示插件google_maps_api_flutter的使用

Flutter 地图展示插件 google_maps_api_flutter 的使用

本插件将 Google Maps API 无缝集成到您的 Flutter 应用程序中，提供类型安全的请求和响应处理，并附带各种可定制的小部件。

特性

API

该插件为以下 Google Maps API 端点提供完全类型安全的请求和响应处理：

  • Places API：

    • 自动补全
    • 详情
    • 搜索（即将推出）
    • 图片（即将推出）

  • Geocoding：

    • 地理编码（即将推出）
    • 反向地理编码（即将推出）

  • Routes：

    • 各种功能（即将推出）

小部件

除了 API 集成外，此插件还提供了利用这些 API 的可定制小部件，例如：

  • 地点自动补全小部件

开始使用

  1. 从 Google Cloud Console 获取 API 密钥。
  2. 确保密钥已启用 WEB 请求，因为插件使用 HTTP 请求与 API 进行交互。
  3. 使用以下命令安装此包的最新版本：
    flutter pub add google_maps_api

使用方法

初始化 API 并传入您的密钥：

final googleMapsApi = GoogleMapsApi(apiKey: "YOUR_API_KEY");

例如，检索地点详细信息：

final googleMapsApi = GoogleMapsApi(apiKey: "YOUR_API_KEY");
PlacesDetailsResponse response = await googleMapsApi.places.details(
    placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
);

if (response.status == PlacesDetailsStatus.OK) {
    print(response.place);
}

小部件示例：

PlaceAutocomplete(
    onSelected: (selection) {
        setState(() {
            _selection = selection;
        });
    },
    apiKey: "YOUR_API_KEY",
),

更多示例，请参阅 /example 目录，其中包含一个全面的示例应用程序。

额外信息

贡献

由于 Google Maps API 包含众多端点，因此贡献以扩展和增强此插件是非常受欢迎的。

如果您发现此插件有用，请在 GitHub 上点赞并收藏它以支持其流行度！


### 示例代码

```dart
// example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:google_maps_api_flutter_example/full_place_autocomplete_example.dart';

Future main() async {
  await dotenv.load(fileName: ".env");

  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'GoogleMapsApi Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const FullPlaceAutocompleteExample(),
    );
  }
}

更多关于Flutter地图展示插件google_maps_api_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter地图展示插件google_maps_api_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个使用 google_maps_api_flutter 插件在 Flutter 中展示地图的示例代码。请确保你已经完成了以下前置步骤：

  1. 在你的 Flutter 项目中添加 google_maps_flutter 依赖。
  2. 获取并配置你的 Google Maps API 密钥。

首先，在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.1.1  # 请检查最新版本号

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

接下来，配置你的 Google Maps API 密钥。在 android/app/src/main/AndroidManifest.xml 中添加：

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

对于 iOS，在 ios/Runner/Info.plist 中添加：

<key>GOOGLE_MAPS_API_KEY</key>
<string>YOUR_GOOGLE_MAPS_API_KEY</string>

现在，你可以在你的 Flutter 应用中使用 Google Maps。以下是一个简单的示例，展示如何在 Flutter 应用中嵌入并显示 Google 地图：

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

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

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

class GoogleMapDemo extends StatefulWidget {
  @override
  _GoogleMapDemoState createState() => _GoogleMapDemoState();
}

class _GoogleMapDemoState extends State<GoogleMapDemo> {
  GoogleMapController? _controller;

  static final CameraPosition _initialCameraPosition = CameraPosition(
    target: LatLng(37.7749, -122.4194), // 默认展示的旧金山
    zoom: 14.0,
  );

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      mapType: MapType.normal,
      initialCameraPosition: _initialCameraPosition,
      onMapCreated: (GoogleMapController controller) {
        _controller = controller;
      },
      markers: Set<Marker>.of([
        Marker(
          markerId: MarkerId('marker_id_1'),
          position: LatLng(37.7749, -122.4194),
          infoWindow: InfoWindow(title: 'San Francisco', snippet: 'USA'),
        ),
      ]),
    );
  }
}

在这个示例中：

  • GoogleMapDemo 是一个有状态的 widget，用于管理 Google Map 的状态。
  • _initialCameraPosition 定义了地图的初始视角和缩放级别。
  • GoogleMap widget 用于显示地图，并接受多个参数，如 mapType, initialCameraPosition, onMapCreated, 和 markers。
  • Marker 用于在地图上添加标记，并可以显示信息窗口（info window）。

确保你已经替换了 YOUR_GOOGLE_MAPS_API_KEY 为你自己的 Google Maps API 密钥。运行这个应用，你应该能够看到一个显示旧金山的 Google 地图，并带有一个标记和信息窗口。

回到顶部