Flutter嵌入谷歌地图插件google_maps_embed_flutter的使用

Flutter嵌入谷歌地图插件google_maps_embed_flutter的使用

本文将介绍如何在Flutter应用中使用google_maps_embed_flutter插件来嵌入谷歌地图。通过该插件，您可以轻松地在您的Flutter应用中添加谷歌地图，并且支持多种地图模式。

开始使用

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

dependencies:
  google_maps_embed_flutter: ^1.0.0

然后运行flutter pub get以获取该库。

功能

google_maps_embed_flutter插件支持以下地图模式：

• 地点（Place）
• 视图（View）
• 路线（Directions）
• 街景（Streetview）
• 搜索（Search）

使用示例

为了展示如何使用google_maps_embed_flutter插件，我们提供了一个基本示例。在该示例中，我们将创建一个包含多个选项卡的应用程序，每个选项卡显示不同模式的地图。

首先，确保您已经在Google Cloud Platform上生成了API密钥。请参阅Google Cloud Platform文档了解如何生成API密钥。

示例代码

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

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

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

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

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  // 填写您的API密钥
  static const kEmbedMapApiKey = "YOUR_API_KEY_HERE";
  int selectedIndex = 0;

  // 不同模式的参数
  static const kSegments = [
    "Place",
    "View",
    "Directions",
    "Street view",
    "Search"
  ];

  // 初始化参数数组
  late final parameters = [
    PlaceParameters(
        key: kEmbedMapApiKey,
        q: Place.address(
            "1600 Amphitheatre Parkway, Mountain View, CA 94043, United States")),
    const ViewParameters(
        key: kEmbedMapApiKey, center: Coordinates(37.4220041, -122.0862462)),
    DirectionParameters(
        key: kEmbedMapApiKey,
        origin: Place.id("ChIJ2eUgeAK6j4ARbn5u_wAGqWA"),
        destination: Place.id("ChIJE9on3F3HwoAR9AhGJW_fL-I")),
    const StreetViewParameters(
        key: kEmbedMapApiKey, location: Coordinates(46.414382, 10.013988)),
    SearchParameters(
        key: kEmbedMapApiKey, q: Place.name("record stores in Seattle"))
  ];

  // 创建TabController
  late final tabController =
      TabController(length: kSegments.length, vsync: this);

  // 处理选项卡选择变化
  void onSelectionChanged(int index) {
    setState(() {
      selectedIndex = index;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          bottom: PreferredSize(
            preferredSize: Size.zero,
            child: TabBar(
              isScrollable: true,
              controller: tabController,
              tabs: kSegments.map((e) => Tab(text: e)).toList(),
              onTap: onSelectionChanged,
            ),
          ),
        ),
        body: EmbedGoogleMap(
          parameters: parameters[selectedIndex],
        ),
      ),
    );
  }
}