Flutter地图搜索与选择插件open_street_map_search_and_pick的使用

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

Flutter地图搜索与选择插件open_street_map_search_and_pick的使用

Features

  • 从地图中选择位置
  • 通过地点搜索位置
  • 简单易用

Demo

open street map search and pick

Objective

该库旨在为所有平台上的Flutter应用程序使用开放街道地图设置位置。

Getting Started

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

import 'package:open_street_map_search_and_pick/open_street_map_search_and_pick.dart';

使用方法非常简单，只需调用以下小部件。您需要传递地图的默认中心位置和一个onPicked方法来获取从地图上选取的位置。

OpenStreetMapSearchAndPick(
        center: LatLong(23, 89),
        buttonColor: Colors.blue,
        buttonText: 'Set Current Location',
        onPicked: (pickedData) {
        })

Then Usage

现在，如果您按下“Set Current Location”按钮，您将通过onPicked方法获得标记的位置。

在onPicked方法中，您将接收到pickedData。

pickedData有两个属性：

  1. latLong
  2. address

latLong还有两个属性：

  1. latitude
  2. longitude

例如：

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);
        })

您可以像这样获取纬度、经度和地址。

Video Tutorial

点击下面的图片查看视频教程。它将重定向您到YouTube视频。

Contributors

感谢以下贡献者的努力：

示例代码

import 'package:flutter/material.dart';
import 'package:open_street_map_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
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @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);
          },
        ));
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中集成和使用open_street_map_search_and_pick插件的详细步骤和代码示例。这个插件允许用户在地图上搜索并选择地点。

第一步：添加依赖

首先，你需要在pubspec.yaml文件中添加open_street_map_search_and_pick插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  open_street_map_search_and_pick: ^最新版本号  # 请替换为实际的最新版本号

然后运行以下命令来安装依赖：

flutter pub get

第二步：导入插件

在你的Flutter项目中，打开你需要使用地图搜索和选择功能的Dart文件，并导入插件。

import 'package:open_street_map_search_and_pick/open_street_map_search_and_pick.dart';

第三步：使用插件

以下是一个简单的示例，展示如何调用插件的搜索和选择功能。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapSearchScreen(),
    );
  }
}

class MapSearchScreen extends StatefulWidget {
  @override
  _MapSearchScreenState createState() => _MapSearchScreenState();
}

class _MapSearchScreenState extends State<MapSearchScreen> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  String? _selectedLocation;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text('地图搜索与选择'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '选择的地点: $_selectedLocation',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                _searchAndPickLocation();
              },
              child: Text('搜索并选择地点'),
            ),
          ],
        ),
      ),
    );
  }

  void _searchAndPickLocation() async {
    try {
      final result = await OpenStreetMapSearchAndPick.searchAndPickLocation(
        apiKey: '你的OpenStreetMap API Key',  // 请替换为你的实际API Key
        language: 'zh',  // 可选，设置搜索语言，例如中文
        initialPosition: LatLng(39.9042, 116.4074),  // 可选，设置初始位置（北京）
        zoom: 14,  // 可选，设置初始缩放级别
      );

      if (result != null) {
        setState(() {
          _selectedLocation = "${result.name}, ${result.osmId}, ${result.latLng}";
        });
      }
    } catch (e) {
      _scaffoldKey.currentState?.showSnackbar(
        SnackBar(
          content: Text('发生错误: $e'),
        ),
      );
    }
  }
}

注意事项

  1. API Key：请确保你已经从OpenStreetMap或其相关服务（如Nominatim）获取了有效的API Key，并将其替换到代码中的apiKey参数。
  2. 位置权限：如果你的应用需要在后台访问用户的位置信息，请确保在AndroidManifest.xml和Info.plist中添加了相应的权限声明。
  3. 错误处理：在实际应用中，请添加更多的错误处理逻辑，以确保应用的健壮性。

通过以上步骤，你就可以在Flutter项目中集成和使用open_street_map_search_and_pick插件来实现地图搜索与选择功能了。

回到顶部