Flutter地理位置选择插件latlng_picker的使用

发布于 1周前 作者 gougou168 来自 Flutter

Flutter地理位置选择插件latlng_picker的使用

这个包提供了使用flutter_map选择位置的简便方法。

特性

  • ✅ 单选或多选。
  • ✅ 支持flutter_map包及其选项。
  • ✅ 使用cached_network_image缓存瓦片。
  • ✅ 支持所有cached_network_image选项。

开始使用

在pubspec.yaml文件中添加依赖项：

dependencies:
    latlng_picker: ^0.0.1

使用方式

为了方便起见，你可以使用showLatLngPicker函数在一个对话框中显示选择器。它内部使用了LatLngPickerDialog，该对话框嵌入了LatLngPicker小部件。

import 'package:latlng_picker/latlng_picker.dart';

// 显示位置选择对话框，并获取用户选择的位置
LatLng? latLng = await showLatLngPicker(context);

高级用法

对于更高级的用法，你可以直接使用LatLngPicker小部件。它包含了flutter_map的所有功能。

import 'package:flutter/material.dart';
import 'package:latlng_picker/latlng_picker.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('地理位置选择'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 显示位置选择对话框，并获取用户选择的位置
            LatLng? latLng = await showLatLngPicker(context);

            if (latLng != null) {
              print('Selected Location: ${latLng.latitude}, ${latLng.longitude}');
            }
          },
          child: Text('选择位置'),
        ),
      ),
    );
  }
}

更多关于Flutter地理位置选择插件latlng_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter地理位置选择插件latlng_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用latlng_picker插件来选择地理位置的代码示例。latlng_picker是一个Flutter插件，用于在地图上选择地理位置并获取其经纬度坐标。

首先，你需要在你的pubspec.yaml文件中添加latlng_picker依赖：

dependencies:
  flutter:
    sdk: flutter
  latlng_picker: ^x.y.z  # 请将x.y.z替换为实际的版本号

然后运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter项目中使用LatLngPicker组件。以下是一个完整的示例代码，展示如何在一个简单的Flutter应用中集成和使用latlng_picker：

import 'package:flutter/material.dart';
import 'package:latlng_picker/latlng_picker.dart';
import 'package:geolocator/geolocator.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'LatLng Picker Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  LatLng? _selectedLatLng;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LatLng Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Location:',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 10),
            _selectedLatLng != null
                ? Text(
                    'Latitude: ${_selectedLatLng!.latitude}, Longitude: ${_selectedLatLng!.longitude}',
                    style: TextStyle(fontSize: 18),
                  )
                : Text('No location selected.', style: TextStyle(fontSize: 18)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _pickLatLng(),
              child: Text('Pick Location'),
            ),
          ],
        ),
      ),
    );
  }

  Future<void> _pickLatLng() async {
    // Optionally, you can use Geolocator to get the current location as a starting point
    Position? currentPosition = await Geolocator.getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high,
      timeout: Duration(seconds: 10),
    );

    LatLng? initialLatLng = currentPosition != null
        ? LatLng(currentPosition!.latitude!, currentPosition!.longitude!)
        : null;

    final result = await showLatLngPicker(
      context: context,
      builder: (context) => MapPicker(
        apiKey: 'YOUR_GOOGLE_MAPS_API_KEY', // Replace with your actual Google Maps API key
        initialLatLng: initialLatLng,
        mapPadding: EdgeInsets.all(20.0),
        zoom: 15.0,
        mapType: MapType.normal,
        onSelected: (latLng) {
          setState(() {
            _selectedLatLng = latLng;
          });
        },
      ),
    );

    if (result != null) {
      setState(() {
        _selectedLatLng = result;
      });
    }
  }
}

注意事项：

  1. Google Maps API Key：你需要一个有效的Google Maps API Key来显示地图。确保在MapPicker的apiKey属性中提供你的API Key。

  2. 权限：在Android和iOS上，你需要请求位置权限来获取当前位置。你可以使用geolocator插件来处理这些权限请求。

  3. 依赖版本：确保你使用的是最新版本的latlng_picker和geolocator插件，因为API可能会随着版本更新而变化。

这个示例展示了如何使用latlng_picker来从地图上选择一个地理位置，并将选中的经纬度坐标显示在页面上。你可以根据需要对代码进行进一步修改和扩展。

回到顶部