Flutter地理位置选择插件flutter_google_location_picker的使用
Flutter地理位置选择插件flutter_google_location_picker的使用
一个帮助在地图上搜索或选择位置的Flutter插件。它完全免费且易于使用。
特性
- 从地图上选择位置
- 按地点搜索位置
- 使用简单
示例
目标
该库旨在为所有平台的Flutter应用程序使用开源地图设置位置。
开始使用
在你的dart文件中导入以下包:
import 'package:flutter_google_location_picker/flutter_google_location_picker.dart';
使用起来很简单,只需调用下面的widget。你需要传递地图的默认中心位置和一个onPicked方法来获取从地图上选择的位置。
// 创建一个FlutterGoogleLocationPicker实例,并指定中心位置和回调函数
FlutterGoogleLocationPicker(
center: LatLong(23, 89), // 设置地图中心点
onPicked: (pickedData) { // 回调函数,当用户选择位置时会被调用
})
进一步使用
如果你按下“Set Current Location”按钮,你将通过onPicked方法获取选定的位置。
在onPicked方法中,你会收到pickedData。
pickedData有两个属性:
- latLong
- address
latLong还有两个属性:
- latitude
- longitude
例如:
// 创建一个FlutterGoogleLocationPicker实例,并指定中心位置和回调函数
FlutterGoogleLocationPicker(
center: LatLong(23, 89),
onPicked: (pickedData) {
print(pickedData.latLong.latitude); // 打印纬度
print(pickedData.latLong.longitude); // 打印经度
print(pickedData.address); // 打印地址
})
你可以这样获取纬度、经度和地址。
如果你想使用缩放按钮,可以使用以下示例:
// 创建一个FlutterGoogleLocationPicker实例,并指定中心位置、缩放按钮和回调函数
FlutterGoogleLocationPicker(
showZoomButtons: true, // 显示缩放按钮
center: LatLong(23, 89),
onPicked: (pickedData) {
print(pickedData.latLong.latitude); // 打印纬度
print(pickedData.latLong.longitude); // 打印经度
print(pickedData.address); // 打印地址
})
你将获得用于处理UI的地图工具。
完整示例代码
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_google_location_picker/flutter_google_location_picker.dart';
import 'package:flutter_google_location_picker/model/lat_lng_model.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Google Map Picker',
debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.blue),
home: const MyHomePage(title: 'Flutter Google Map Picker'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({Key? key, required this.title}) : super(key: key);
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: FlutterGoogleLocationPicker(
center: LatLong(latitude: 33, longitude: -81), // 设置地图中心点
showZoomButtons: true, // 显示缩放按钮
onPicked: (pickedData) {
if (kDebugMode) {
print(pickedData.latLong.latitude); // 打印纬度
print(pickedData.latLong.longitude); // 打印经度
print(pickedData.address); // 打印地址
}
},
),
);
}
}
更多关于Flutter地理位置选择插件flutter_google_location_picker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter地理位置选择插件flutter_google_location_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何在Flutter项目中使用flutter_google_location_picker
插件的示例代码。这个插件允许用户通过Google Maps界面选择地理位置。
1. 添加依赖
首先,你需要在pubspec.yaml
文件中添加flutter_google_location_picker
的依赖:
dependencies:
flutter:
sdk: flutter
flutter_google_location_picker: ^x.y.z # 请使用最新版本号替换x.y.z
2. 导入插件
在你的Dart文件中导入插件:
import 'package:flutter_google_location_picker/flutter_google_location_picker.dart';
3. 配置Android和iOS的API密钥
为了使用Google Maps,你需要在Android和iOS项目中配置API密钥。这通常涉及修改AndroidManifest.xml
和Info.plist
文件,并添加Google Maps API密钥。
Android (AndroidManifest.xml
)
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="YOUR_ANDROID_API_KEY"/>
iOS (Info.plist
)
<key>GMSApiKey</key>
<string>YOUR_IOS_API_KEY</string>
4. 使用插件
下面是一个完整的示例,展示如何在Flutter应用中集成和使用flutter_google_location_picker
:
import 'package:flutter/material.dart';
import 'package:flutter_google_location_picker/flutter_google_location_picker.dart';
import 'package:geolocator/geolocator.dart';
import 'package:geolocator_platform_interface/geolocator_platform_interface.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: LocationPickerScreen(),
);
}
}
class LocationPickerScreen extends StatefulWidget {
@override
_LocationPickerScreenState createState() => _LocationPickerScreenState();
}
class _LocationPickerScreenState extends State<LocationPickerScreen> {
LatLng? selectedLocation;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Google Location Picker'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
selectedLocation != null
? GoogleMapPreview(
lat: selectedLocation!.latitude,
lng: selectedLocation!.longitude,
zoom: 14,
apiKey: 'YOUR_MAPS_API_KEY', // 确保这里使用你的API密钥
)
: Text('No location selected yet.'),
SizedBox(height: 20),
ElevatedButton(
onPressed: () async {
// 检查权限
bool serviceEnabled;
LocationPermission permission;
serviceEnabled = await Geolocator.isLocationServiceEnabled();
if (!serviceEnabled) {
return Future.error('Location services are disabled.');
}
permission = await Geolocator.checkPermission();
if (permission == LocationPermission.denied) {
permission = await Geolocator.requestPermission();
if (permission == LocationPermission.denied) {
return Future.error('Location permissions are denied');
}
}
if (permission == LocationPermission.deniedForever) {
return Future.error(
'Location permissions are permanently denied, we cannot request permissions.');
}
// 使用插件选择位置
LatLng? result = await showLocationPicker(
context: context,
apiKey: 'YOUR_MAPS_API_KEY', // 确保这里使用你的API密钥
initialPosition: LatLng(0, 0), // 初始位置
useCurrentLocation: true, // 是否使用当前位置
selectInitialPosition: true, // 是否选择初始位置
myLocationButtonEnabled: true, // 是否显示“我的位置”按钮
toolbarEnabled: true, // 是否显示工具栏
circleMarkerOptions: CircleMarkerOptions(
color: Colors.blueAccent,
),
markerOptions: MarkerOptions(
icon: BitmapDescriptor.defaultMarker,
),
onLocationSelected: (location) {
print('Selected location: ${location.latitude}, ${location.longitude}');
},
);
if (result != null) {
setState(() {
selectedLocation = result;
});
}
},
child: Text('Pick Location'),
),
],
),
),
);
}
}
注意事项
- API密钥:确保你已经获取了Google Maps API密钥,并在
AndroidManifest.xml
和Info.plist
中进行了配置。 - 权限处理:上述代码示例中包含了基本的权限检查和处理逻辑。
- 错误处理:实际应用中应添加更多的错误处理逻辑,以提高用户体验。
这个示例展示了如何集成flutter_google_location_picker
插件,并允许用户通过Google Maps界面选择地理位置。你可以根据自己的需求进一步定制和扩展这个示例。