搜索插件、代码仓与 APP 分类

mapbox_search 封面
插件详情v4.4.0

mapbox_search

一个用于使用 MapBox API 进行地点搜索和静态地图图像的 Flutter 包

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
2.2万
喜欢数
96
Pub 分数
140

安装插件

flutter pub add mapbox_search

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,使用 MapBox API 实现地点搜索功能并生成静态地图图像。它通过提供简单直观的接口,简化了在 Flutter 应用中集成地理定位功能的过程,支持搜索位置、获取坐标以及显示静态地图。非常适合需要地址查找、位置选择或地图预览的应用程序。该包支持 Android、iOS、Web、macOS、Windows 和 Linux 多个平台,确保广泛的兼容性。开发者可以轻松实现基于位置的服务,且设置简单。

适合场景

  • 移动应用中的位置搜索
  • 表单地址选择器
  • 静态地图预览
  • 地理编码集成
  • 基于地图的用户界面组件
  • 旅行和配送应用

主要特点

  • MapBox API 集成
  • 静态地图图像生成
  • 跨平台支持
  • 简单搜索界面
  • 坐标检索
  • 响应式设计

适合对象

  • 开发位置感知应用的开发者
  • 需要地址查找的应用
  • 需要静态地图的项目
  • 跨平台移动和网页应用
  • 旅行、物流和地图工具

使用建议

  • 需要 MapBox API 密钥
  • 需要网络连接
  • 免费层级上的潜在速率限制
  • 搜索UI的自定义选项有限
  • 依赖外部API的稳定性
  • 每个平台的额外配置

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Pub

About

Note: Breaking Changes in 4.x.x

  • PlaceSearch and ReverseGeoCoding classes are now merged into one class called GeoCoding with two methods getPlaces and getAddress since both of them are using the same API.
  • MapBox's new SearchBox API is added to the package.
  • Instead of throwing exceptions, the package now returns ApiResponse Record which can be either Success or Failure and can be handled using fold method.
  • Location class is now converted to a record.
  • List of coordinates are now converted to a record (lat: double, long: doube) whereever possible.

This package provides easy api calls to MapBox Search API.

Also, it contains an static map image generator.

Maki Icons can be used now in marker icon

As this package doesn't depend on Flutter SDK you cannot use the Colors class anymore on you Flutter project. Instead use map_box_search's Color.rgb constructor, passing the values as parameters:

var myColor = Colors.redAccent; //Flutter's Color class
var mapBoxColor = Color.rgb( myColor.red, myColor.green, myColor.blue);

Installing

First of all you must acquire an API key on the MapBox website https://www.mapbox.com/

Then, add the following to your pubspec.yaml file:

dependencies:
  mapbox_search: any

Setup

Now you can setup the API key for whole app by calling MapBoxSearch.init('API KEY') in your main() function, this way you don't have to pass the API key to every class that uses the package.

Usage of ApiResponse
final ApiResponse<List<MapBoxPlace>> addresses = await getAddress();
addresses.fold(
    (success) => // Do something with success data,
    (failure) => // Do something with failure data,
  );

Examples

SearchBox API
SearchBoxAPI search = SearchBoxAPI(
      apiKey: 'API Key', // dont pass if you have set it in MapBoxSearch.init('API KEY')
      limit: 6,
);
Get Suggestions
ApiResponse<SuggestionResponse> searchPlace = await search.getSuggestions(
    "central",
  );
Get mapbox_id
  • From SuggestionResponse
String mapboxId = searchPlace.suggestions[0].mapboxId;
Get Place Details
ApiResponse<RetrieveResonse> searchPlace = await search.getPlace(mapboxId);
Reverse GeoCoding
var reverseGeoCoding = GeoCoding(
    apiKey: 'API Key', // dont pass if you have set it in MapBoxSearch.init('API KEY')
    limit: 5,
);

Future<ApiResponse<List<MapBoxPlace>>> getAddress() =>
  reverseGeoCoding.getAddress(
    Location(lat: 72.0, lng: 76.00),
);
Forward GeoCoding Seach
var geocoding = GeoCoding(
    apiKey: 'API Key', // dont pass if you have set it in MapBoxSearch.init('API KEY')
    country: "BR",
    limit: 5,
    types: [PlaceType.address, PlaceType.place],
);

Future<ApiResponse<List<MapBoxPlace>>> getPlaces() =>
  geocoding.getPlaces(
      "central park",
      proximity: Location(
        lat: -19.984634,
        lng: -43.9502958,
      ),
    );
Batch Geocoding (v6)

Perform multiple geocoding queries (forward, reverse, or structured) in a single request.

var geocoding = GeoCodingApiV6(
    apiKey: 'API Key', // or use MapBoxSearch.init('API KEY')
    limit: 5,
);

Future<ApiResponse<BatchGeocodingResponse>> getBatch() =>
  geocoding.batch([
    ForwardQuery(query: "Eiffel Tower", limit: 1),
    ReverseQuery(location: (lat: 40.6892, long: -74.0445), limit: 1),
  ]);
Static Image
StaticImage staticImage = StaticImage(
    apiKey: 'API Key', // or use MapBoxSearch.init('API KEY')
  );
Image With Polyline
    String getStaticImageWithPolyline() => staticImage.getStaticUrlWithPolyline(
      point1: (lat: 37.77343, long: -122.46589),
      point2: (lat: 37.75965, long: -122.42816),
      marker1: MapBoxMarker( markerColor: const RgbColor(0, 0, 0),
          markerLetter: 'p',
          markerSize: MarkerSize.LARGE),
      marker2: MapBoxMarker(
          markerColor: const RgbColor(244, 67, 54),
          markerLetter: 'q',
          markerSize: MarkerSize.SMALL),
      height: 300,
      width: 600,
      zoomLevel: 15.5,
      style: MapBoxStyle.Dark,
      path: MapBoxPath(pathColor: const RgbColor(255, 0, 0), pathOpacity: 0.5, pathWidth: 5, pathPolyline: "%7DrpeFxbnjVsFwdAvr%40cHgFor%40jEmAlFmEMwM_FuItCkOi%40wc%40bg%40wBSgM"),
      render2x: true,
      center: (lat: 37.766541503617475, long: -122.44702324243272), // Required when auto is false
      // auto: true, // Alternatively, use auto: true to automatically fit markers and path
    );
Image with Marker
String getStaticImageWithMarker() => staticImage.getStaticUrlWithMarker(
  center: (lat: 37.77343, long: -122.46589),
  marker: MapBoxMarker(
      markerColor: const RgbColor(0, 0, 0), markerLetter: 'p', markerSize: MarkerSize.LARGE),
  height: 300,
  width: 600,
  zoomLevel: 16,
  style: MapBoxStyle.Streets,
  render2x: true,
);
Image without Marker
String getStaticImageWithoutMarker() => staticImage.getStaticUrlWithoutMarker(
    center: (lat: 37.75965, long: -122.42816),
    height: 300,
    width: 600,
    zoomLevel: 16,
    style: MapBoxStyle.Outdoors,
    render2x: true,
  );
Example App

Check out the example/ directory for a complete Flutter application demonstrating:

  • Forward & Reverse Geocoding
  • Batch Geocoding
  • Static Images (Markers, Polylines, Auto-framing)

所属分类

依赖

依赖清单 5 项

源码仓库

使用此插件的项目