Flutter动态Google Maps API密钥管理插件google_map_dynamic_key的使用
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
更多关于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 密钥。
- 初始化 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());
}
- 创建主应用类:
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;
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 密钥,并遵守了所有相关的隐私和安全要求。