Flutter地图位置选择插件flutter_map_location_picker的使用

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

Flutter地图位置选择插件flutter_map_location_picker的使用

简介

flutter_map_location_picker 是一个用于在Flutter应用中通过 flutter_map 和 geocoding 选择地理位置的插件。它完全免费且高度可定制。

GitHub仓库

示例动图

使用方法

添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  # 添加 flutter_map_location_picker
  flutter_map_location_picker: ^0.0.4

请检查最新版本并在安装前确认版本号，如果有新版本的问题，请使用之前的版本。

如何使用

首先，在你的Dart代码中添加以下导入：

import 'package:flutter_map_location_picker/flutter_map_location_picker.dart';

你可以在小部件树中添加 MapLocationPicker 小部件，并通过 onPicked 参数处理所选的位置。

MapLocationPicker(
  initialLatitude: null, 
  initialLongitude: null, 
  onPicked: (result) {
    // 在这里获取位置结果
    print(result.completeAddress);
    print(result.latitude);
    print(result.longitude);
  }
)

示例代码

以下是一个完整的示例项目，展示如何在应用程序中使用 flutter_map_location_picker 插件。

main.dart

import 'package:flutter/material.dart';
import 'home_view.dart'; // 假设这是包含 MapLocationPicker 的页面

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

home_view.dart

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

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('位置选择器示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final result = await Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => MapLocationPicker(
                  initialLatitude: null,
                  initialLongitude: null,
                  onPicked: (pickedResult) {
                    print(pickedResult.completeAddress);
                    print(pickedResult.latitude);
                    print(pickedResult.longitude);
                    Navigator.pop(context, pickedResult);
                  },
                ),
              ),
            );

            if (result != null) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text('选择了地址：${result.completeAddress}'),
                ),
              );
            }
          },
          child: const Text('选择位置'),
        ),
      ),
    );
  }
}

在这个示例中，用户可以通过点击按钮来启动 MapLocationPicker，选择位置后会返回并显示所选地址的信息。

希望这个指南和示例能帮助你在Flutter应用中集成位置选择功能！


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何使用 flutter_map_location_picker 插件在 Flutter 应用中选择地图位置的代码示例。这个插件结合了 flutter_map 和一个位置选择器，允许用户在地图上选择位置。

首先，确保你的 pubspec.yaml 文件中包含以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  flutter_map: ^0.14.0  # 请根据最新版本调整
  latlong2: ^0.8.0  # flutter_map 的依赖
  flutter_map_location_picker: ^0.9.0  # 请根据最新版本调整

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

接下来，在你的 Dart 文件中使用这些依赖项。以下是一个完整的示例，展示了如何集成和使用 flutter_map_location_picker：

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong2.dart';
import 'package:flutter_map_location_picker/flutter_map_location_picker.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Map Location Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  LatLng? _selectedLocation;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map Location Picker Demo'),
      ),
      body: Center(
        child: _selectedLocation == null
            ? LocationPicker(
                mapController: MapController(),
                initialPosition: LatLng(0, 0),
                zoom: 2.0,
                onLocationSelected: (LatLng position) {
                  setState(() {
                    _selectedLocation = position;
                  });
                },
                builder: (context, controller) {
                  return FlutterMap(
                    mapController: controller,
                    options: MapOptions(
                      center: _selectedLocation ?? LatLng(0, 0),
                      zoom: controller.zoom,
                    ),
                    layers: [
                      TileLayerOptions(
                        urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                        subdomains: ['a', 'b', 'c'],
                      ).build(),
                      MarkerLayerOptions(
                        markers: _selectedLocation != null
                            ? [
                                Marker(
                                  width: 80.0,
                                  height: 80.0,
                                  point: _selectedLocation!,
                                  builder: (ctx) => Container(
                                    child: Icon(
                                      Icons.location_on,
                                      color: Colors.red,
                                      size: 40,
                                    ),
                                  ),
                                ),
                              ]
                            : [],
                      ),
                    ],
                  );
                },
              )
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Selected Location:'),
                  Text(
                    'Latitude: ${_selectedLocation!.latitude}, Longitude: ${_selectedLocation!.longitude}',
                    style: TextStyle(fontSize: 20),
                  ),
                ],
              ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Reset the selected location
          setState(() {
            _selectedLocation = null;
          });
        },
        tooltip: 'Reset',
        child: Icon(Icons.clear),
      ),
    );
  }
}

在这个示例中，我们创建了一个 Flutter 应用，其中包含一个地图屏幕 MapScreen。这个屏幕使用 flutter_map 显示地图，并使用 flutter_map_location_picker 允许用户在地图上选择一个位置。

  • LocationPicker 小部件用于显示地图和位置选择器。
  • onLocationSelected 回调在用户选择位置时被调用，并更新 _selectedLocation 状态。
  • 如果 _selectedLocation 不为空，我们在地图上显示一个标记，并显示所选位置的经纬度。
  • 浮动操作按钮（FAB）用于重置选择的位置。

你可以根据需要调整这个示例，例如更改地图的初始位置、缩放级别、标记样式等。

回到顶部