Flutter谷歌地图集成插件google_maps_flutter_ios的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter 谷歌地图集成插件 google_maps_flutter_ios 的使用

简介

google_maps_flutter_iosgoogle_maps_flutter 插件在 iOS 平台上的实现。通过使用 google_maps_flutter,你可以在 Flutter 应用中轻松集成谷歌地图功能。

使用方法

添加依赖

由于 google_maps_flutter_ios 是一个被推荐的联邦插件(endorsed federated plugin),你只需要在 pubspec.yaml 文件中添加 google_maps_flutter 即可。该插件会自动包含 google_maps_flutter_ios,因此你不需要单独添加它到 pubspec.yaml 中。

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.6

配置 API 密钥

在使用谷歌地图之前,你需要在 Info.plist 文件中配置你的 API 密钥。打开 ios/Runner/Info.plist 文件,并添加以下内容:

<key>GOOGLE_MAPS_API_KEY</key>
<string>YOUR_API_KEY_HERE</string>

示例代码

以下是一个简单的示例,展示如何在 Flutter 应用中使用 google_maps_flutter 插件来显示谷歌地图。

主要代码

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(
      title: 'Flutter Google Maps Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapSample(),
    );
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  static final CameraPosition _kLake = CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(37.43296265331129, -122.08832357078792),
      tilt: 59.440717697143555,
      zoom: 19.151926040649414);

  late GoogleMapController mapController;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: _kGooglePlex,
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          mapController.animateCamera(CameraUpdate.newCameraPosition(_kLake));
        },
        label: Text('To the lake!'),
        icon: Icon(Icons.directions_boat),
      ),
    );
  }
}

支持的热图选项

以下是 google_maps_flutter_ios 插件支持的热图选项:

字段 支持
Heatmap.dissipating x
Heatmap.maxIntensity x
Heatmap.minimumZoomIntensity
Heatmap.maximumZoomIntensity
HeatmapGradient.colorMapSize

测试应用

这些测试应用主要用于手动测试和自动化集成测试 google_maps_flutter_ios 插件的不同版本。它们并不是为了演示如何实际使用该插件,而是为了确保插件在不同版本的 Google Maps iOS SDK 上能够正常工作。

结构

该包包含多个示例,用于测试不同版本的 Google Maps iOS SDK。因为插件的依赖关系是松散绑定的,CocoaPods 会选择支持应用程序目标操作系统的最新 SDK 版本。为了确保插件能够编译所有可能解析的 SDK 版本,有多个大致相同的示例,每个示例都有不同的最小目标 iOS 版本。

为了避免浪费 CI 资源,测试大多不会重复。测试结构如下:

  • 最旧版本包含所有常规测试(Dart 集成测试、XCTest、XCUITest)。
  • 最新版本仅包含 XCTests(最便宜的测试),可以用于单元测试特定于新 SDK 的代码路径(例如,位于目标 OS #if 检查之后的代码)。

更新示例

  • 当新的 SDK 主版本发布并提高最小 iOS 部署版本时,应添加一个新的示例,以确保插件可以与该版本的 SDK 编译,并且应在插件的 podspec 文件中将范围提升到下一个主版本。
  • 当稳定版 Flutter 的最低支持版本达到无法解析最旧示例的 SDK 时,应删除该示例,并将其所有测试(Dart 集成测试、原生单元测试、原生 UI 测试)合并到下一个最旧的版本中。

希望以上内容对你有所帮助!如果你有任何问题或需要进一步的帮助,请随时提问。


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

1 回复

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


当然,以下是如何在Flutter项目中集成和使用google_maps_flutter_ios插件的代码案例。不过,需要注意的是,从Flutter 2.0开始,google_maps_flutter插件已经支持iOS和Android平台,因此通常不需要单独使用google_maps_flutter_ios。但为了符合你的要求,这里将展示如何使用google_maps_flutter插件,这个插件已经包含了iOS的支持。

步骤 1: 添加依赖

首先,在你的pubspec.yaml文件中添加google_maps_flutter依赖:

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

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

步骤 2: 配置iOS项目

  1. ios/Runner/Info.plist文件中添加API密钥

    <key>IOSClientIds</key>
    <array>
        <string>YOUR_GOOGLE_MAPS_IOS_API_KEY</string>
    </array>
    <key>GMSServices</key>
    <dict>
        <key>APIKey</key>
        <string>YOUR_GOOGLE_MAPS_IOS_API_KEY</string>
    </dict>
    

    替换YOUR_GOOGLE_MAPS_IOS_API_KEY为你的Google Maps API密钥。

  2. 确保在Google Cloud Console中启用了Google Maps iOS SDK API,并生成了API密钥

步骤 3: 使用Google Maps插件

创建一个Flutter页面来显示Google Maps。以下是一个简单的示例:

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: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  GoogleMapController? _controller;

  static final CameraPosition _initialCameraPosition = CameraPosition(
    target: LatLng(37.7749, -122.4194), // 旧金山的坐标
    zoom: 14.0,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps Demo'),
      ),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: _initialCameraPosition,
        onMapCreated: (GoogleMapController controller) {
          _controller = controller;
        },
        markers: Set<Marker>.of([
          Marker(
            markerId: MarkerId('marker_id_home'),
            position: LatLng(37.7749, -122.4194),
            infoWindow: InfoWindow(title: 'San Francisco', snippet: 'USA'),
          ),
        ]),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _goToTheLake,
        tooltip: 'Go to the lake',
        child: Icon(Icons.directions_boat),
      ),
    );
  }

  Future<void> _goToTheLake() async {
    final GoogleMapController? controller = _controller;
    if (controller != null) {
      final CameraPosition lake = CameraPosition(
        bearing: 191.20634461538697,
        target: LatLng(37.43296265331129, -122.085749655962),
        tilt: 59.440717697143555,
        zoom: 19.151926040649414,
      );

      controller.animateCamera(CameraUpdate.newCameraPosition(lake));
    }
  }
}

说明

  • GoogleMap组件用于显示地图。
  • CameraPosition定义了地图的初始视角。
  • Marker用于在地图上显示标记。
  • onMapCreated回调用于获取GoogleMapController实例,它允许你控制地图(例如,动画相机移动)。
  • floatingActionButton用于演示如何通过按钮触发地图动画。

确保你已经按照Google的指南正确设置了API密钥,并且你的项目已经正确配置了网络权限(特别是iOS项目中的Info.plist配置)。

这样,你就可以在Flutter应用中集成并使用Google Maps了。

回到顶部