Flutter Google 地图

17 Mar 2025 | 6 分钟阅读

地图用于简单直观地获取有关世界的信息。它通过显示世界的位置、形状和大小、位置以及它们之间的距离来呈现世界。我们可以使用Google Maps Flutter 插件在我们的应用程序中添加地图。该插件可以自动访问 Google Maps 服务器、地图显示并响应用户手势。它还允许我们在地图上添加标记。

为什么要将 Google Maps 与 Flutter 结合使用？

Flutter 开发人员更喜欢 Google Maps 用于他们的应用程序，因为它们为 Android 和 iOS 都提供了原生性能。它允许我们一次实现代码，并允许它们为两个设备（Android 和 iOS）运行代码。 Google Maps Flutter 插件在 Google Map 小部件中提供，支持initialCameraPosition、maptype 和 onMapCreated。我们可以在地球上的任何地方设置相机和标记的位置。我们可以根据自己的选择设计标记。它还在cameraposition中带有一个缩放属性，以便在初始页面上提供 Google 地图视图的缩放功能。

让我们逐步了解如何在 Flutter 应用程序中添加 Google Maps。

步骤 1： 创建一个新项目。在 IDE 中打开此项目，导航到 lib 文件夹，然后打开 pubspec.yaml 文件以设置地图。

步骤 2： 在 pubspec.yaml 文件中，我们需要在依赖项部分添加 Google Maps Flutter 插件，该插件在 pub.dartlang.org 上作为 google_maps_flutter 提供。添加依赖项后，单击 get package 链接以在 main.dart 文件中导入该库。

dependencies:  
  flutter:  
    sdk: flutter  
  cupertino_icons: ^0.1.2  
  google_maps_flutter: ^0.5.21

它确保我们在添加依赖项时在 google_maps_flutter 依赖项的左侧留出两个空格。

步骤 3： 下一步是为您的项目获取 API 密钥。如果我们使用的是 Android 平台，请按照 Android 版 Maps SDK：获取 API 密钥上给出的说明进行操作。创建 API 密钥后，将其添加到应用程序清单文件。我们可以通过导航到 android/app/src/main/AndroidManifest.xml 来找到此文件，如下所示

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR ANDROID API KEY HERE"/> 

步骤 4： 接下来，在 dart 文件中导入包，如下所示

步骤 5： 现在，我们准备好添加一个 GoogleMap 小部件以开始创建 UI 来显示地图。

示例

让我们借助一个例子来理解它。

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

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

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

class _MyAppState extends State<MyApp> {
  GoogleMapController myController;

  final LatLng _center = const LatLng(45.521563, -122.677433);

  void _onMapCreated(GoogleMapController controller) {
    myController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Maps Demo'),
          backgroundColor: Colors.green,
        ),
        body: Stack(
          children: <Widget>[
            GoogleMap(
              onMapCreated: _onMapCreated,
              initialCameraPosition: CameraPosition(
                target: _center,
                zoom: 10.0,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(14.0),
              child: Align(
                alignment: Alignment.topRight,
                child: FloatingActionButton(
                  onPressed: () => print('You have pressed the button'),
                  materialTapTargetSize: MaterialTapTargetSize.padded,
                  backgroundColor: Colors.green,
                  child: const Icon(Icons.map, size: 30.0),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在上面的代码中，我们注意到了这些术语

mapController：它类似于我们在 Flutter 中看到的其他控制器。它控制 GoogleMap 类上的所有活动。在这里，它管理相机功能，例如位置、动画、缩放等。

onMapCreated：这是一个用于创建地图并接受 MapController 作为参数的方法。

initialCameraPosition：这是一个必需的参数，用于设置我们想要开始的相机位置。它允许我们设置我们想要在地图上指向世界的哪个部分。

stack：它用于将其他 Flutter 小部件放置在地图小部件的顶部。

输出

当我们运行该应用程序时，它应该返回屏幕的 UI，如下面的屏幕截图所示

如何更改地图外观？

我们可以使用 mapType 属性更改地图外观，例如普通视图、卫星视图等。此属性允许开发人员显示地图图块的类型。 GoogleMap 小部件主要提供五种类型的图块，如下所示

none：它不显示任何地图图块。
normal：它在地图上显示带有交通、标签和细微地形信息的图块。
satellite：它显示该位置的卫星图像（航拍照片）。
terrain：它显示一个地区土地的特定物理特征（指示地形的类型和高度）。
hybrid：它显示带有某些标签或叠加层的卫星图像。

我们可以通过在上面的代码中创建一个变量 _currentMapType 来显示当前地图类型，然后将 mapType: _currentMapType 添加到 GoogleMap 小部件来实现此目的。

MapType _currentMapType = MapType.normal;

@override
Widget build(BuildContext context) {
  return MaterialApp(
    GoogleMap(
      mapType: _currentMapType,
    ),
  );
} 

接下来，我们必须添加一个方法来修改 setState() 函数调用中的 _currentMapType 的值。此方法将更新地图外观以与 _currentMapType 变量的新值匹配。

void _onMapTypeButtonPressed() {
  setState(() {
    _currentMapType = _currentMapType = = MapType.normal
        ? MapType.satellite
        : MapType.normal;
  });
}

最后，将 onPressed 属性替换为 _onMapTypeButtonPressed。

child: FloatingActionButton(
  onPressed: _onMapTypeButtonPressed
),

让我们看看更改地图外观的完整代码。打开 dart 文件并将其替换为以下代码

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

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

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

class _MyAppState extends State<MyApp> {
  GoogleMapController myController;

  final LatLng _center = const LatLng(45.521563, -122.677433);

  MapType _currentMapType = MapType.normal;

  void _onMapTypeButtonPressed() {
    setState(() {
      _currentMapType = _currentMapType == MapType.normal
          ? MapType.satellite
          : MapType.normal;
    });
  }

  void _onMapCreated(GoogleMapController controller) {
    myController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Maps Demo'),
          backgroundColor: Colors.green,
        ),
        body: Stack(
          children: <Widget>[
            GoogleMap(
              onMapCreated: _onMapCreated,
              initialCameraPosition: CameraPosition(
                target: _center,
                zoom: 10.0,
              ),
              mapType: _currentMapType
            ),
            Padding(
              padding: const EdgeInsets.all(14.0),
              child: Align(
                alignment: Alignment.topRight,
                child: FloatingActionButton(
                  onPressed: _onMapTypeButtonPressed,
                  materialTapTargetSize: MaterialTapTargetSize.padded,
                  backgroundColor: Colors.green,
                  child: const Icon(Icons.map, size: 30.0),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

输出

当我们运行该应用程序时，它应该返回屏幕的 UI，如下面的屏幕截图所示

如果我们单击地图图标，我们将获得我们指定位置的卫星图像。请参阅下图

如何在地图上添加标记？

标记标识地图上的位置。我们可以通过使用 GoogleMap 小部件内的 markers 属性在地图上添加标记。通常，当我们移动相机从一个位置到另一个位置时，会显示标记。例如，如果我们要从波兰移动到加利福尼亚，当相机移动到加利福尼亚时，我们可以在该特定位置看到一个标记。

我们可以通过创建一个变量 _markers 来添加一个标记，该变量将存储地图的标记，然后将此变量设置为 GoogleMap 小部件中的标记属性。

final Set<Marker> _markers = {};
@override
Widget build(BuildContext context) {
  return MaterialApp(
    GoogleMap(
      markers: _markers,
    ),
  );
}

接下来，需要通过添加以下代码来跟踪地图上的当前相机位置

LatLng _currentMapPosition = _center;

void _onCameraMove(CameraPosition position) {
  _currentMapPosition = position.target;
}

@override
Widget build(BuildContext context) {
  return MaterialApp(
    GoogleMap(
      onCameraMove: _onCameraMove,
    ),
  );
} 

最后，我们需要通过修改 setState() 函数调用中的 _markers 来在地图中添加一个标记。

void _onAddMarkerButtonPressed() {
  setState(() {
    _markers.add(Marker(
      markerId: MarkerId(_lastMapPosition.toString()),
      position: _currentMapPosition,
      infoWindow: InfoWindow(
        title: 'Nice Place'
      ),
      icon: BitmapDescriptor. defaultMarkerWithHue(BitmapDescriptor.hueViolet)
    ));
  });
}

让我们看看将标记添加到地图的完整代码。打开 dart 文件并将其替换为以下代码

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

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

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

class _MyAppState extends State<MyApp> {
  GoogleMapController mapController;
  static final LatLng _center = const LatLng(45.521563, -122.677433);
  final Set<Marker> _markers = {};
  LatLng _currentMapPosition = _center;

  void _onAddMarkerButtonPressed() {
    setState(() {
      _markers.add(Marker(
        markerId: MarkerId(_currentMapPosition.toString()),
        position: _currentMapPosition,
        infoWindow: InfoWindow(
          title: 'Nice Place',
          snippet: 'Welcome to Poland'
        ),
        icon: BitmapDescriptor.defaultMarker,
      ));
    });
  }

  void _onCameraMove(CameraPosition position) {
    _currentMapPosition = position.target;
  }

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Maps Demo'),
          backgroundColor: Colors.green,
        ),
        body: Stack(
          children: <Widget>[
            GoogleMap(
              onMapCreated: _onMapCreated,
              initialCameraPosition: CameraPosition(
                target: _center,
                zoom: 10.0,
              ),
              markers: _markers,
              onCameraMove: _onCameraMove
            ),
            Padding(
              padding: const EdgeInsets.all(14.0),
              child: Align(
                alignment: Alignment.topRight,
                child: FloatingActionButton(
                  onPressed: _onAddMarkerButtonPressed,
                  materialTapTargetSize: MaterialTapTargetSize.padded,
                  backgroundColor: Colors.green,
                  child: const Icon(Icons.map, size: 30.0),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

输出

运行该应用程序，我们将获得屏幕的 UI，如第一个屏幕截图所示。当我们单击该按钮时，它会在地图上的最后一个位置显示标记。当我们点击标记时，将显示提供有关位置的标题和片段的信息。

下一个主题Flutter Slivers

Flutter Google 地图

为什么要将 Google Maps 与 Flutter 结合使用？

示例

如何更改地图外观？

如何在地图上添加标记？

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Flutter 教程

Dart 编程

Flutter 基础

Flutter 小部件

Flutter 路由

高级概念

差异

面试题

Flutter Google 地图

为什么要将 Google Maps 与 Flutter 结合使用？

示例

如何更改地图外观？

如何在地图上添加标记？

相关帖子

Flutter REST API

Android 平台特定代码

Flutter 数据库

Flutter 测试

Flutter 启动画面

Flutter 包

Flutter Slivers

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器