Flutter地点搜索与选择插件osm_search_and_pick的使用

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

Flutter地点搜索与选择插件osm_search_and_pick的使用

OSM Search and Pick for Flutter

osm_search_and_pick 是一个用于在Flutter应用中集成OpenStreetMap进行地点搜索和选择的插件。它免费、易用，非常适合为您的Flutter应用添加地点功能。

功能特性

  • 从地图上直接选择地点。
  • 轻松搜索地点。
  • 简单直观的操作体验。

示例演示

open street map search and pick

目标

该库旨在为Flutter应用集成OpenStreetMap，支持所有平台，帮助开发者轻松实现地点设置功能。

入门指南

1. 导入包

在您的Dart文件中导入以下包：

import 'package:osm_search_and_pick/osm_map_search_and_pick.dart';
2. 使用插件

使用 OpenStreetMapSearchAndPick 小部件非常简单。您需要传递地图的默认中心位置，并提供一个 onPicked 回调方法来获取用户选择的位置。

OpenStreetMapSearchAndPick(
  center: LatLong(23, 89), // 设置地图的初始中心位置
  buttonColor: Colors.blue, // 设置按钮颜色
  buttonText: 'Set Current Location', // 设置按钮文本
  onPicked: (pickedData) {
    // 当用户选择地点后，回调此方法
    print(pickedData.latLong.latitude); // 打印纬度
    print(pickedData.latLong.longitude); // 打印经度
    print(pickedData.address); // 打印地址
    print(pickedData.addressName); // 打印地址名称
  },
)

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 osm_search_and_pick 插件：

import 'package:flutter/material.dart';
import 'package:osm_search_and_pick/open_street_map_search_and_pick.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: 'OSM',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter OSM Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@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: OpenStreetMapSearchAndPick(
        buttonTextStyle: const TextStyle(fontSize: 18, fontStyle: FontStyle.normal),
        buttonColor: Colors.blue,
        buttonText: 'Set Current Location',
        onPicked: (pickedData) {
          // 当用户选择地点后，回调此方法
          print(pickedData.latLong.latitude); // 打印纬度
          print(pickedData.latLong.longitude); // 打印经度
          print(pickedData.address); // 打印地址
          print(pickedData.addressName); // 打印地址名称
        },
        inputDecoration: null,
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用osm_search_and_pick插件进行地点搜索与选择的示例代码。这个插件允许你集成一个基于OpenStreetMap的地点搜索和选择功能。

首先，确保你已经在pubspec.yaml文件中添加了osm_search_and_pick依赖：

dependencies:
  flutter:
    sdk: flutter
  osm_search_and_pick: ^latest_version  # 请替换为最新的版本号

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

接下来，在你的Flutter项目中，你可以按照以下步骤使用osm_search_and_pick插件：

  1. 导入插件：
import 'package:osm_search_and_pick/osm_search_and_pick.dart';
  1. 创建搜索和选择地点的界面：
import 'package:flutter/material.dart';
import 'package:osm_search_and_pick/osm_search_and_pick.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter OSM Search and Pick Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SearchAndPickExample(),
    );
  }
}

class SearchAndPickExample extends StatefulWidget {
  @override
  _SearchAndPickExampleState createState() => _SearchAndPickExampleState();
}

class _SearchAndPickExampleState extends State<SearchAndPickExample> {
  String selectedLocation = "No location selected";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OSM Search and Pick Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedLocation,
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                final result = await OsmSearchAndPick.showSearch(
                  context,
                  apiKey: 'YOUR_NOMINATIM_API_KEY',  // 请替换为你的Nominatim API密钥
                  language: 'en',
                );

                if (result != null) {
                  setState(() {
                    selectedLocation = "${result.name}, ${result.osmType}, ${result.osmId}, ${result.lat}, ${result.lon}";
                  });
                }
              },
              child: Text('Search and Pick Location'),
            ),
          ],
        ),
      ),
    );
  }
}
  1. 处理API密钥：

在上面的代码中，apiKey: 'YOUR_NOMINATIM_API_KEY' 需要替换为你自己的Nominatim API密钥。你可以在OpenStreetMap Nominatim的网站上申请一个API密钥。

  1. 运行应用：

确保你的设备或模拟器已经连接，然后运行flutter run来启动应用。在应用中，点击“Search and Pick Location”按钮将打开一个地点搜索界面，你可以搜索并选择一个地点，选择完成后，选定的地点信息将显示在屏幕上。

这个示例展示了如何使用osm_search_and_pick插件进行地点搜索和选择，并将选中的地点信息显示在应用界面上。根据实际需求，你可以进一步自定义和扩展这个功能。

回到顶部