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有两个属性:

  1. latLong
  2. address

latLong还有两个属性:

  1. latitude
  2. 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

1 回复

更多关于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.xmlInfo.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'),
            ),
          ],
        ),
      ),
    );
  }
}

注意事项

  1. API密钥:确保你已经获取了Google Maps API密钥,并在AndroidManifest.xmlInfo.plist中进行了配置。
  2. 权限处理:上述代码示例中包含了基本的权限检查和处理逻辑。
  3. 错误处理:实际应用中应添加更多的错误处理逻辑,以提高用户体验。

这个示例展示了如何集成flutter_google_location_picker插件,并允许用户通过Google Maps界面选择地理位置。你可以根据自己的需求进一步定制和扩展这个示例。

回到顶部