Flutter教程如何在Flutter中使用Google Maps SDK

我正在学习Flutter开发，想在我的应用中集成Google Maps功能。按照官方文档尝试使用google_maps_flutter插件时遇到几个问题：

  1. 如何在Android和iOS平台上正确配置API密钥？是否需要不同的密钥？
  2. 地图初始化时出现黑屏，但没有任何错误提示，该如何排查？
  3. 如何在地图上添加自定义标记和信息窗口？
  4. 实现实时位置跟踪功能需要注意哪些权限设置？

有没有完整的实现示例可以参考？希望有经验的开发者能分享具体的配置步骤和常见问题的解决方法。

3 回复

在Flutter中使用Google Maps SDK需要借助google_maps_flutter插件。首先，在pubspec.yaml文件中添加依赖：

dependencies:
  google_maps_flutter: ^2.1.1

然后获取Google Maps API Key，并将其配置到Android和iOS项目中。

在代码中初始化地图：

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

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  GoogleMapController? mapController;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
      ),
    );
  }
}

确保在Android的AndroidManifest.xml和iOS的Info.plist中正确配置API密钥。这样就可以在Flutter应用中集成Google Maps了。

更多关于Flutter教程如何在Flutter中使用Google Maps SDK的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


要在Flutter中使用Google Maps SDK，首先需要添加依赖google_maps_flutter。确保已在Google Cloud Platform启用Maps API并获取API密钥。

  1. 安装依赖：在pubspec.yaml中添加google_maps_flutter。
  2. 配置API密钥：
    • Android：在AndroidManifest.xml添加meta-data标签，放入API密钥。
    • iOS：在GoogleService-Info.plist中设置API密钥，并在AppDelegate.swift初始化。
  3. 使用GoogleMap组件展示地图，可通过CameraPosition设置初始位置。例如：
GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(37.77483, -122.41942),
    zoom: 11.0,
  ),
);

注意：Android需在清单文件中声明网络权限，iOS需更新info.plist允许HTTP请求。

在Flutter中使用Google Maps SDK需要以下步骤：

  1. 添加依赖 在pubspec.yaml中添加：
dependencies:
  google_maps_flutter: ^2.2.0
  1. 获取API密钥
  • 前往Google Cloud Console
  • 启用"Maps SDK for Android"和"Maps SDK for iOS"
  • 创建API密钥
  1. 平台配置

Android配置： 在AndroidManifest.xml的<application>标签内添加：

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY"/>

iOS配置： 在AppDelegate.swift的application(_:didFinishLaunchingWithOptions:)方法中添加：

GMSServices.provideAPIKey("YOUR_API_KEY")
  1. 基本使用代码
import 'package:google_maps_flutter/google_maps_flutter.dart';

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

class MapSampleState extends State<MapSample> {
  late GoogleMapController mapController;
  final LatLng _center = const LatLng(37.427, -122.085);

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

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      onMapCreated: _onMapCreated,
      initialCameraPosition: CameraPosition(
        target: _center,
        zoom: 11.0,
      ),
      markers: {
        Marker(
          markerId: MarkerId('home'),
          position: _center,
        ),
      },
    );
  }
}

注意事项：

  • 记得在真实设备上测试
  • 为了更好的性能，建议使用cached_network_image插件
  • 需要处理位置权限

这样你就能在Flutter应用中集成Google Maps了。

回到顶部