Flutter地图展示插件platform_maps_flutter的使用
Flutter地图展示插件platform_maps_flutter的使用
简介
platform_maps_flutter
是一个Flutter插件,它为Android和iOS设备提供了原生的地图支持。该插件依赖于Flutter嵌入Android和iOS视图的机制,因此目前仍处于开发者预览阶段。
这个包结合了 google_maps_flutter
和 apple_maps_flutter
插件,为Android和iOS创建了一个跨平台的原生地图实现。
功能截图
Android | iOS |
---|---|
当前功能
- 相机移动,包括方向、航向、倾斜(也支持动画)
- 标记,包括自定义标记图像和信息窗口
- 不同的地图类型
- 地图操作,启用/禁用手势,显示当前位置,显示指南针等
iOS配置
要在iOS上使用此插件,需要在app的Info.plist文件中添加一个布尔属性,键为 io.flutter.embedded_views_preview
,值为 YES
。还需要添加 Privacy - Location When In Use Usage Description
键,并提供您的使用描述。
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Your usage description here</string>
Android配置
在应用的清单文件 android/app/src/main/AndroidManifest.xml
中指定您的API密钥:
<manifest ...
<application ...
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR KEY HERE"/>
示例用法
以下是一个完整的示例代码,展示了如何使用 platform_maps_flutter
插件:
示例代码
import 'package:flutter/material.dart';
import 'package:platform_maps_flutter/platform_maps_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: PlatformMap(
initialCameraPosition: CameraPosition(
target: const LatLng(47.6, 8.8796),
zoom: 16.0,
),
markers: Set<Marker>.of(
[
Marker(
markerId: MarkerId('marker_1'),
position: LatLng(47.6, 8.8796),
consumeTapEvents: true,
infoWindow: InfoWindow(
title: 'PlatformMarker',
snippet: "Hi I'm a Platform Marker",
),
onTap: () {
print("Marker tapped");
},
),
],
),
mapType: MapType.satellite,
onTap: (location) => print('onTap: $location'),
onCameraMove: (cameraUpdate) => print('onCameraMove: $cameraUpdate'),
compassEnabled: true,
onMapCreated: (controller) {
Future.delayed(Duration(seconds: 2)).then(
(_) {
controller.animateCamera(
CameraUpdate.newCameraPosition(
const CameraPosition(
bearing: 270.0,
target: LatLng(51.5160895, -0.1294527),
tilt: 30.0,
zoom: 18,
),
),
);
controller
.getVisibleRegion()
.then((bounds) => print("bounds: ${bounds.toString()}"));
},
);
},
),
);
}
}
说明
initialCameraPosition
: 设置初始相机位置,包括目标经纬度和缩放级别。markers
: 添加标记,可以设置自定义图标和信息窗口。mapType
: 设置地图类型,例如卫星图或普通地图。onTap
: 处理地图点击事件。onCameraMove
: 处理相机移动事件。compassEnabled
: 启用指南针。onMapCreated
: 地图创建完成后执行的操作,例如动画移动相机位置。
希望这个示例能帮助你更好地理解和使用 platform_maps_flutter
插件。如果有任何建议或改进意见,欢迎提交PR。
更多关于Flutter地图展示插件platform_maps_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter地图展示插件platform_maps_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个使用 platform_maps_flutter
插件在 Flutter 应用中展示地图的示例代码。这个插件允许你使用 Google Maps(在 Android 和 iOS 上)和 Apple Maps(仅在 iOS 上)来显示地图。
首先,你需要在你的 pubspec.yaml
文件中添加 platform_maps_flutter
依赖:
dependencies:
flutter:
sdk: flutter
platform_maps_flutter: ^2.0.0 # 请检查最新版本号
然后运行 flutter pub get
来获取依赖。
接下来,你需要设置 Android 和 iOS 的 API 密钥。对于 Google Maps,你需要在 Google Cloud Console 上创建一个项目并启用 Maps SDK for Android 和 iOS,然后分别获取 API 密钥。
Android 设置
在 android/app/src/main/AndroidManifest.xml
中添加 API 密钥:
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="YOUR_ANDROID_API_KEY"/>
iOS 设置
在 ios/Runner/Info.plist
中添加 API 密钥:
<key>GOOGLE_MAPS_API_KEY</key>
<string>YOUR_IOS_API_KEY</string>
并且,确保在 ios/Podfile
中添加以下配置以使用 Google Maps SDK:
platform :ios, '11.0'
target 'Runner' do
use_frameworks!
config = use_native_modules!
# Flutter Pod
flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
# Add this line to use Google Maps SDK
pod 'GoogleMaps'
# Add any additional pods you require
# ...
target 'RunnerTests' do
inherit! :search_paths
# Pods for testing
end
target 'RunnerUITests' do
# Pods for testing
end
end
post_install do |installer|
installer.pods_project.targets.each do |target|
flutter_additional_ios_build_settings(target)
target.build_configurations.each do |config|
config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
'$(inherited)',
## Add these lines to use Google Maps SDK
'GMS_CORE=1',
'GOOGLE_MAPS_IOS_VERSION=8.0.0' # Update to the latest version
]
end
end
end
Flutter 代码示例
接下来,在你的 Dart 文件中使用 platform_maps_flutter
来显示地图。以下是一个简单的示例:
import 'package:flutter/material.dart';
import 'package:platform_maps_flutter/platform_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> {
late PlatformMapController _controller;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Platform Maps Flutter Example'),
),
body: PlatformMap(
initialCameraPosition: CameraPosition(
target: LatLng(37.7749, -122.4194), // San Francisco
zoom: 12.0,
),
onMapCreated: (PlatformMapController controller) {
_controller = controller;
},
options: MapOptions(
mapType: MapType.normal,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Example: Move camera to a new location
_controller.animateCamera(
CameraUpdate.newLatLngZoom(
LatLng(40.7128, -74.0060), // New York
12.0,
),
);
},
tooltip: 'Move to New York',
child: Icon(Icons.location_on),
),
);
}
}
这个示例展示了如何创建一个简单的 Flutter 应用,其中包含一个地图视图,并允许用户通过点击浮动操作按钮将地图中心移动到纽约市。
请注意,根据你的项目设置和平台的不同,你可能需要调整一些配置步骤。确保你遵循了 platform_maps_flutter
插件的官方文档中的最新指南。