Flutter谷歌地图集成插件google_maps_cross的使用
Flutter谷歌地图集成插件google_maps_cross的使用
GoogleMapsCross
一个允许在Flutter应用中创建基本时间线的Flutter包。此插件具有可定制性且易于集成到您的应用程序中。您将找到以下功能：
- 使用跨平台的谷歌地图。
开始使用
在pubspec.yaml文件中添加以下依赖项以下载依赖。
dependencies:
flutter:
sdk: flutter
google_maps_cross: 1.0.0
使用方法
导入
import 'package:google_maps_cross/google_maps_cross.dart';
Web
在index.html文件中：
<body id="app-container">
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
<script src="main.dart.js?version=2.1.33" type="application/javascript"></script>
</body>
iOS
在AppDelegate.swift文件中：
import Flutter
import GoogleMaps
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GMSServices.provideAPIKey("API_KEY")
GeneratedPluginRegistrant.register(with: self)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
Android
在AndroidManifest.xml文件中：
<application
android:label="example"
android:icon="@mipmap/ic_launcher">
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="API_KEY"/>
<activity
android:name=".MainActivity"
android:launchMode="singleTop"
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize">
</application>
实现示例
以下是完整的示例代码，展示如何在Flutter应用中集成Google Maps Cross插件。
import 'package:flutter/material.dart';
import 'package:google_maps_cross/google_maps_cross.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter GOOGLE MAPS CROSS',
theme: ThemeData(primarySwatch: Colors.blue),
home: MyHomePage(title: 'Flutter GOOGLE MAPS CROSS'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// 定义一个全局key用于管理GoogleMapCross实例
GlobalKey<GoogleMapStateBase> key = GlobalKey<GoogleMapStateBase>();
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
margin: EdgeInsets.only(right: 10),
width: MediaQuery.of(context).size.width,
child: GoogleMapCross(
key: key, // 绑定全局key
interactive: true, // 是否可以交互
onTap: (x) {}, // 地图点击事件
initialPosition: GeoCoord(-28.4831, -47.3916), // 初始位置
initialZoom: 5.0, // 初始缩放级别
markers: Set.from([ // 添加标记
Marker(GeoCoord(-18.4435, -47.3415), onTap: (_) {
print("description3"); // 点击标记时打印描述
}),
]),
),
),
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// 动态添加标记
GoogleMapCross.of(key)?.addMarker(Marker(GeoCoord(-19.4831, -48.3916),
icon: 'assets/images/truck_blue.png', onTap: (_) {
print("description"); // 点击标记时打印描述
}));
GoogleMapCross.of(key)
?.addMarker(Marker(GeoCoord(-20.5855, -48.4015), onTap: (_) {
print("description3"); // 点击标记时打印描述
}));
},
tooltip: 'Increment',
child: Icon(Icons.add_location),
),
);
}
}
更多关于Flutter谷歌地图集成插件google_maps_cross的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter谷歌地图集成插件google_maps_cross的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
google_maps_cross 是一个用于在 Flutter 应用中集成 Google 地图的插件。它提供了跨平台的支持，允许你在 iOS 和 Android 上使用 Google 地图。以下是如何在 Flutter 项目中使用 google_maps_cross 插件的步骤：
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 google_maps_cross 插件的依赖：
dependencies:
flutter:
sdk: flutter
google_maps_cross: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 来获取依赖。
2. 获取 Google Maps API 密钥
为了使用 Google 地图，你需要从 Google Cloud Platform 获取一个 API 密钥。请按照以下步骤操作：
- 访问 Google Cloud Console。
- 创建一个新项目或选择一个现有项目。
- 启用
Maps SDK for Android和Maps SDK for iOS。 - 在
API 和服务->凭据中创建一个 API 密钥。
3. 配置 Android 和 iOS 项目
Android 配置
在 android/app/src/main/AndroidManifest.xml 文件中添加以下代码：
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.yourapp">
<application>
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="YOUR_ANDROID_API_KEY"/>
</application>
</manifest>
将 YOUR_ANDROID_API_KEY 替换为你在 Google Cloud Console 中获取的 API 密钥。
iOS 配置
在 ios/Runner/AppDelegate.swift 文件中添加以下代码：
import UIKit
import Flutter
import GoogleMaps
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GMSServices.provideAPIKey("YOUR_IOS_API_KEY")
GeneratedPluginRegistrant.register(with: self)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
将 YOUR_IOS_API_KEY 替换为你在 Google Cloud Console 中获取的 API 密钥。
4. 在 Flutter 中使用 google_maps_cross
在你的 Flutter 项目中，你可以使用 GoogleMap 小部件来显示地图。以下是一个简单的示例：
import 'package:flutter/material.dart';
import 'package:google_maps_cross/google_maps_cross.dart';
class MapScreen extends StatefulWidget {
[@override](/user/override)
_MapScreenState createState() => _MapScreenState();
}
class _MapScreenState extends State<MapScreen> {
GoogleMapController? mapController;
final LatLng _center = const LatLng(37.7749, -122.4194); // 旧金山坐标
void _onMapCreated(GoogleMapController controller) {
mapController = controller;
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Google Maps Cross'),
),
body: GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 11.0,
),
),
);
}
}
void main() => runApp(MaterialApp(
home: MapScreen(),
));