Flutter地图搜索插件dart_mapbox_search的使用

Flutter地图搜索插件dart_mapbox_search的使用

dart_mapbox_search

Mapbox Search 简单易用!💎

这是一个用于与 Mapbox 搜索框和地理编码 API 进行交互的 Dart 包。它提供了一组工具和模型,以方便地集成 Mapbox 强大的搜索功能。

pub package License

由 💙 开发并维护自 scial.app

"Buy Me A Coffee"

支持的功能

功能 API Endpoint 可用性
获取建议结果 搜索框 API /suggest
获取建议特征 搜索框 API /retrieve
获取搜索结果 搜索框 API /forward
通过类别检索 POI 搜索框 API /category
获取类别列表 搜索框 API /list/category
执行反向查询 搜索框 API /reverse
使用搜索文本输入进行正向地理编码 地理编码 API /forward
使用结构化输入进行正向地理编码 地理编码 API /forward
反向地理编码 地理编码 API /reverse
批量地理编码 地理编码 API /batch

快速开始 🚀

安装 🧑‍💻

在你的 pubspec.yaml 文件的 dependencies 部分添加以下行:

dependencies:
  dart_mapbox_search: <latest_version>

使用 👽

导入包:

import 'package:dart_mapbox_search/dart_mapbox_search.dart';

创建实例:

late final MapboxSearchClient mapboxSearch;

void main() async {
  final MapboxSearch result = MapboxSearch.initialize(accessToken: '...');
  mapboxSearch = result.client;
}

使用该包提供的众多方法之一,例如:

final MapboxSearchResult<MapboxSearchSuggestResponse> response = 
  await mapboxSearch.search.suggest('scial Headquarter');

response.fold(
  onSuccess: (MapboxSearchSuggestResponse data) => print('Data found!'), 
  onFailure: (int statusCode, String? message, String? error) => print('Error occured.')
);

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

1 回复

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


当然,以下是一个关于如何使用 dart_mapbox_search 插件在 Flutter 应用中实现地图搜索功能的示例代码。dart_mapbox_search 是一个用于 Flutter 的 Mapbox 搜索插件,它允许你在地图上搜索位置。

首先,确保你已经在 pubspec.yaml 文件中添加了 dart_mapbox_search 依赖:

dependencies:
  flutter:
    sdk: flutter
  dart_mapbox_search: ^x.y.z  # 请替换为最新版本号

然后,运行 flutter pub get 以获取依赖。

接下来,下面是一个简单的示例,展示如何在 Flutter 应用中使用 dart_mapbox_search 进行地图搜索:

import 'package:flutter/material.dart';
import 'package:dart_mapbox_search/dart_mapbox_search.dart';
import 'package:geolocator/geolocator.dart';
import 'package:geocoding/geocoding.dart';

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

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

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

class _MapSearchScreenState extends State<MapSearchScreen> {
  final MapboxSearchController _searchController = MapboxSearchController();
  String _searchResult = '';

  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }

  Future<void> _searchLocation(String query) async {
    final Position position = await Geolocator.getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high,
    );

    final List<Placemark> placemarks = await placemarkFromCoordinates(
      position.latitude,
      position.longitude,
    );

    final String countryCode = placemarks.isNotEmpty
        ? placemarks.first.isoCountryCode
        : 'us'; // 默认使用美国作为地区代码

    final SearchResult result = await _searchController.search(
      query,
      countryCodes: [countryCode],
      types: [SearchType.address],
      proximity: Position(latitude: position.latitude, longitude: position.longitude),
    );

    if (result.features.isNotEmpty) {
      setState(() {
        _searchResult = result.features.first.placeName;
      });
    } else {
      setState(() {
        _searchResult = 'No results found';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mapbox Search Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              decoration: InputDecoration(
                labelText: 'Search location',
                border: OutlineInputBorder(),
              ),
              onEditingComplete: () async {
                final String query = (context as EditableTextController).text;
                await _searchLocation(query);
              },
            ),
            SizedBox(height: 20),
            Text(
              _searchResult,
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

注意事项:

  1. 权限处理:在实际应用中,你需要处理位置权限。在 Android 上,你需要在 AndroidManifest.xml 中请求权限,并在运行时请求权限。在 iOS 上,你需要在 Info.plist 中声明权限。

  2. API 密钥:确保你已经获得了 Mapbox 的 API 密钥,并在你的应用中正确配置。

  3. 依赖项:除了 dart_mapbox_search,这个示例还使用了 geolocatorgeocoding 插件来获取当前位置和进行地理编码。

  4. UI/UX:上述示例是一个非常基本的实现,你可能需要根据实际需求对 UI/UX 进行优化,比如处理搜索结果的展示、错误处理等。

这个示例代码展示了如何使用 dart_mapbox_search 插件进行基本的地图搜索功能。你可以根据具体需求进一步扩展和自定义功能。

回到顶部