Flutter Google Maps - 芒果文档

📌 相关文章

📜 Flutter Google Maps

📅 最后修改于: 2021-01-02 05:28:59 🧑 作者: Mango

扑谷歌地图

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

为什么要在Flutter上使用Google Maps?

为android和iOS都提供了本机性能。它使我们可以一次实现代码，并允许他们为两种设备(Android和iOS)运行代码。 Google Map小部件中提供了Google Maps Flutter插件，该插件支持initialCameraPosition，maptype和onMapCreated 。我们可以在地球上的任何地方设置摄像机和标记的位置。我们可以根据自己的选择设计标记。它还在cameraposition位置具有zoom属性，以在初始页面上提供google map视图中的缩放。

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

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

第2步：在pubspec.yaml文件中，我们需要在依赖项部分添加Google Maps Flutter插件，该文件可在pub.dartlang.org上以google_maps_flutter的形式获得。添加依赖项后，单击“获取软件包”链接以将库导入main.dar t文件中。

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来找到此文件，如下所示：

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

import 'package:google_maps_flutter/google_maps_flutter.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 {
  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: [
            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窗口小部件放置在地图窗口小部件的顶部。

输出：

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

如何更改地图外观?

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

none ：不显示任何地图图块。
正常：它将在地图上显示包含路况，标签和细微地形信息的图块。
卫星：显示该位置的卫星图像(航空照片)。
地形：显示一块土地的特定物理特征(指示地形的类型和高度)。
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;
  });
}

最后，用_ onMapTypeButtonPressed替换onPressed属性。

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 {
  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: [
            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),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

输出：

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

如果单击地图图标，我们将获取指定位置的卫星图像。见下图：

如何在地图上添加标记?

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

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

final Set _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 {
  GoogleMapController mapController;
  static final LatLng _center = const LatLng(45.521563, -122.677433);
  final Set _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: [
            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作为第一个屏幕截图。当我们单击按钮时，它将在地图上的最后一个位置显示标记。当我们点击标记时，将显示信息，其中提供了有关该位置的标题和摘录。