添加带标记的地图

简介

示例：带标记的地图

本教程介绍了如何向 Flutter 应用添加 Google 地图。添加的地图中包含一个用于指示特定位置的标记，也称为图钉。

获取代码

克隆或下载 Flutter 示例代码库。您可以在 google_maps 目录中找到相应示例代码。

设置您的开发项目

请确保您已经完成了《设置 Flutter 项目》指南中所述的步骤，然后再执行本主题中的后续操作。

1. 导入 Flutter 版 Google 地图软件包

  1. 在您的首选 IDE 中打开 main.dart 文件。
  2. 确保在该文件中添加了以下导入语句：
import 'package:google_maps_flutter/google_maps_flutter.dart';

2. 向您的 Flutter 应用中添加 Google 地图

在 Scaffold widget 内，添加一个 GoogleMap widget 作为主体。 

GoogleMap(
   initialCameraPosition: CameraPosition(
      target: _center,
      zoom: 11.0,
   ),
   markers: {
      const Marker(
         markerId: MarkerId('Sydney'),
         position: LatLng(-33.86, 151.20),
      )
   },
)

  • markerId 选项可为您的标记加标签。
  • position 选项可设置相应标记在地图上的显示位置。

3. 构建并运行您的应用

使用以下任一方式启动 Flutter 应用：

  1. 在您的 IDE 中，点击 Run 按钮
  2. 在命令行中，运行 flutter run。

您应该会看到一张带有标记的地图，这张地图以位于澳大利亚东海岸的悉尼为中心，与本页上的图像类似。

问题排查

  • 如果您没有看到地图，请检查您是否已获取 API 密钥并将其添加到您的应用。
  • 如果您使用了 iOS 软件包标识符来限制 API 密钥，请修改该密钥，以便添加该应用的软件包标识符：com.google.examples.map-with-marker。
  • 确保您的 Wi-Fi 或 GPS 连接信号良好。
  • 使用 Flutter 开发者工具查看日志并调试应用。
  • 您可以详细了解如何运行 Flutter 应用。

4. 理解代码

您可以在 GitHub 上找到这些代码。

  1. 导入必要的软件包，然后将应用初始化。 
       import 'package:flutter/material.dart';
   import 'package:google_maps_flutter/google_maps_flutter.dart';

   void main() => runApp(const MyApp());

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

   @override
      State<MyApp> createState() => _MyAppState();
   }
  2. 创建以澳大利亚悉尼为中心的地图。 
    class _MyAppState extends State<MyApp> {
   
   late GoogleMapController mapController;
   
   final LatLng _center = const LatLng(-33.86, 151.20);
   
   void _onMapCreated(GoogleMapController controller) {
      mapController = controller;
   }
  3. 添加在应用中显示地图所需的 widget。 
    @override
Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Maps Sample App'),
          backgroundColor: Colors.green[700],
        ),
        body: GoogleMap(
            onMapCreated: _onMapCreated,
            initialCameraPosition: CameraPosition(
              target: _center,
              zoom: 11.0,
            ), // CameraPosition
        ), // GoogleMap
      ), // Scaffold
    ); // MaterialApp
  }
}
  4. 添加“markers”widget，从而将该 widget 添加到您的应用中。 
       body: GoogleMap(
      onMapCreated: _onMapCreated,
      initialCameraPosition: CameraPosition(
         target: _center,
         zoom: 11.0,
      ),
      markers: {
         const Marker(
               markerId: const MarkerId("Sydney"),
               position: LatLng(-33.86, 151.20),
            ), // Marker
      }, // markers
   ), // GoogleMap
   ...
  5. 为标记添加信息窗口。 
          const Marker(
            markerId: const MarkerId("Sydney"),
            position: LatLng(-33.86, 151.20),
            infoWindow: InfoWindow(
               title: "Sydney",
               snippet: "Capital of New South Wales",
            ), // InfoWindow
      ), //Marker
      ...
    默认情况下，Flutter 版 Google 地图软件包会在用户点按标记时显示信息窗口中的内容。如果您愿意使用该默认行为，则无需为标记添加点击监听器。

恭喜！您已构建了一个 Flutter 应用，该应用显示可使用标记来指示特定位置的 Google 地图，并且会在信息窗口内提供额外的信息。您还学习了如何使用 Flutter 版 Google 地图软件包。