Flutter动态Google Maps API密钥管理插件google_map_dynamic_key的使用

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

Flutter动态Google Maps API密钥管理插件google_map_dynamic_key的使用

我们可以通过服务器端API动态更改Google Maps API密钥,而不是在AndroidManifest.xml和AppDelegate.swift中硬编码。这样可以在运行时根据需要改变地图密钥。

示例

以下是使用Google Map Dynamic Key的小示例。

编码

Flutter Dart代码实现

final _googleMapDynamicKeyPlugin = GoogleMapDynamicKey();
await _googleMapDynamicKeyPlugin
        .setGoogleApiKey("Your API KEY")
        .then((value) {
      setState(() {
        isLoading = false;
      });
    });

开发者

由具有❤️的高级Flutter开发者Um Kithya制作



# 示例代码

```dart
import 'package:flutter/material.dart';
import 'dart:async';

// import 'package:flutter/services.dart';
import 'package:google_map_dynamic_key/google_map_dynamic_key.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _googleMapDynamicKeyPlugin = GoogleMapDynamicKey();
  bool isLoading = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    // initPlatformState();
    initGoogleMapKey();
  }

  Future<void> initGoogleMapKey() async {
    setState(() {
      isLoading = true;
    });
    await _googleMapDynamicKeyPlugin
        .setGoogleApiKey("Your API KEY")
        .then((value) {
      setState(() {
        isLoading = false;
      });
    });
  }

  static const LatLng _kMapCenter = LatLng(11.541352, 104.9208219);

  static const CameraPosition _kInitialPosition =
      CameraPosition(target: _kMapCenter, zoom: 11.0, tilt: 0, bearing: 0);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Plugin example app'),
          ),
          body: isLoading
              ? const CircularProgressIndicator.adaptive()
              : const GoogleMap(initialCameraPosition: _kInitialPosition)),
    );
  }
}

更多关于Flutter动态Google Maps API密钥管理插件google_map_dynamic_key的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动态Google Maps API密钥管理插件google_map_dynamic_key的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用 google_map_dynamic_key 插件在 Flutter 中动态管理 Google Maps API 密钥的示例代码。

首先,确保你已经在 pubspec.yaml 文件中添加了 google_map_dynamic_key 依赖:

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^x.y.z  # 请使用最新版本
  google_map_dynamic_key: ^a.b.c  # 请使用最新版本

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

接下来,我们来看一下如何使用这个插件。假设你需要根据某些条件(如用户登录状态或地理位置)动态更改 Google Maps API 密钥。

  1. 初始化 Flutter 应用
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:google_map_dynamic_key/google_map_dynamic_key.dart';

void main() {
  runApp(MyApp());
}
  1. 创建主应用类
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapScreen(),
    );
  }
}
  1. 创建地图屏幕
class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

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

  @override
  void initState() {
    super.initState();

    // 初始化 GoogleMapDynamicKey 插件
    _dynamicKey = GoogleMapDynamicKey(
      apiKeyProvider: () async {
        // 在这里你可以根据条件返回不同的 API 密钥
        // 例如,从服务器获取,或者根据用户登录状态获取
        String apiKey = await fetchApiKeyFromServer();
        return apiKey;
      },
    );

    // 使用 _dynamicKey 初始化 GoogleMap
    _initGoogleMap();
  }

  Future<String> fetchApiKeyFromServer() async {
    // 模拟从服务器获取 API 密钥的过程
    // 在实际使用中,你应该发起一个网络请求来获取 API 密钥
    return Future.delayed(Duration(seconds: 2), () => "YOUR_DYNAMIC_API_KEY_HERE");
  }

  Future<void> _initGoogleMap() async {
    // 等待插件完成 API 密钥的获取
    final apiKey = await _dynamicKey.apiKey;
    if (mounted) {
      setState(() {
        // 使用获取到的 API 密钥初始化 GoogleMap
        _createGoogleMap(apiKey);
      });
    }
  }

  void _createGoogleMap(String apiKey) {
    // 创建一个 GoogleMap 小部件
    GoogleMap(
      mapType: MapType.normal,
      initialCameraPosition: CameraPosition(
        target: LatLng(0.0, 0.0),
        zoom: 1.0,
      ),
      myLocationEnabled: true,
      onMapCreated: (GoogleMapController controller) {
        _controller = controller;
      },
      // 注意:这里并没有直接将 apiKey 传递给 GoogleMap 构造函数,
      // 因为 `google_map_dynamic_key` 插件会在内部处理 API 密钥的替换。
    );
    // 注意:上面的 GoogleMap 小部件实际上应该被包含在 Scaffold 或其他布局小部件中,
    // 这里为了简化示例,直接写出了 GoogleMap 的创建过程。
    // 在实际代码中,你需要将 GoogleMap 小部件放入合适的布局中。
  }

  @override
  Widget build(BuildContext context) {
    // 在这里构建你的 UI,包括 GoogleMap 小部件(需要在 _createGoogleMap 方法后添加到布局中)
    // 由于 _createGoogleMap 方法只是创建了 GoogleMap 实例,并没有直接返回 Widget,
    // 你需要将其包装在适当的布局中,并在 UI 中显示。
    // 例如,你可以使用一个 FutureBuilder 来等待 API 密钥获取完成后再显示 GoogleMap。
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Google Map'),
      ),
      body: FutureBuilder<String>(
        future: _dynamicKey.apiKey,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              return Center(
                child: Text('Error fetching API key: ${snapshot.error!}'),
              );
            } else {
              // 这里你应该使用获取到的 API 密钥来构建 GoogleMap 小部件
              // 由于 GoogleMap 小部件的创建过程较为复杂,并且需要布局管理,
              // 因此这里不再详细展示,而是假设你已经在其他地方正确使用了它。
              return Container(
                // 在这里添加你的 GoogleMap 小部件布局代码
              );
            }
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }
}

注意:上面的代码示例并不完整,因为直接将 GoogleMap 小部件的创建过程放在了 _createGoogleMap 方法中,而没有实际将其添加到布局中。在实际代码中,你需要使用 FutureBuilder 或其他状态管理方法来确保在 API 密钥获取完成后正确显示 GoogleMap 小部件。

此外,由于 google_map_dynamic_key 插件的工作原理是在内部处理 API 密钥的替换,因此你不需要直接将 API 密钥传递给 GoogleMap 构造函数。插件会在后台完成这些工作。

最后,请确保你已经按照 Google Maps API 的使用条款和条件正确设置了你的 API 密钥,并遵守了所有相关的隐私和安全要求。

回到顶部