Flutter地图搜索插件mapbox_search的使用

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

Flutter地图搜索插件mapbox_search的使用

简介

mapbox_search 是一个用于Flutter项目的插件,它提供了简单易用的API来调用MapBox的搜索服务。该插件支持前向地理编码(将地址转换为坐标)、反向地理编码(将坐标转换为地址)以及使用MapBox的SearchBox API进行位置建议查询。此外,还提供了一个静态地图图像生成器。

注意:4.x.x 版本中的重大变更

  • PlaceSearchReverseGeoCoding 类已被合并为单个名为 GeoCoding 的类,并且具有两个方法:getPlacesgetAddress
  • 新增了对MapBox SearchBox API 的支持。
  • 错误处理机制已更新,现在返回 ApiResponse 记录,可以是 Success 或者 Failure,并且可以通过 fold 方法进行处理。
  • Location 类已经被转换成记录类型。
  • 坐标列表也被转换成了记录 (lat: double, long: double)

由于此包不依赖于Flutter SDK,因此不能再直接使用Flutter中的 Colors 类;而是应该使用 map_box_search 提供的 Color.rgb 构造函数来创建颜色对象。

安装与配置

获取API密钥

首先需要在 MapBox官网 上获取API密钥。

pubspec.yaml中添加依赖项

dependencies:
  mapbox_search: any

初始化API密钥

可以在应用启动时通过调用 MapBoxSearch.init('your_api_key') 来设置全局API密钥,这样就不需要每次调用API时都传递API密钥了。

import 'package:mapbox_search/mapbox_search.dart';

void main() {
  MapBoxSearch.init('YOUR_API_KEY');
  runApp(MyApp());
}

使用示例

反向地理编码 (Reverse GeoCoding)

import 'package:mapbox_search/mapbox_search.dart';

Future<void> reverseGeocodingExample() async {
  var geoCodingService = GeoCoding(
    country: "BR", // 国家代码
    limit: 5,      // 返回结果数量限制
  );

  final Location location = Location(lat: -19.984846, lng: -43.946852);

  ApiResponse<List<MapBoxPlace>> addresses = await geoCodingService.getAddress(location);

  addresses.fold(
    (success) => print("成功获取地址: $success"),
    (failure) => print("获取地址失败: $failure"),
  );
}

地点搜索 (Places Search)

import 'package:mapbox_search/mapbox_search.dart';

Future<void> placesSearchExample() async {
  var placesService = GeoCoding(
    country: "BR",
    limit: 5,
  );

  ApiResponse<List<MapBoxPlace>> places = await placesService.getPlaces(
    "patio",
    proximity: Location(lat: -19.984634, lng: -43.9502958),
  );

  places.fold(
    (success) => print("成功获取地点: $success"),
    (failure) => print("获取地点失败: $failure"),
  );
}

SearchBox API 示例

import 'package:mapbox_search/mapbox_search.dart';

Future<void> searchBoxExample() async {
  SearchBoxAPI searchBox = SearchBoxAPI(limit: 6);

  ApiResponse<SuggestionResponse> suggestions = await searchBox.getSuggestions("central");

  if (suggestions.isSuccess) {
    String mapboxId = suggestions.data.suggestions[0].mapboxId;
    ApiResponse<RetrieveResponse> placeDetails = await searchBox.getPlace(mapboxId);

    placeDetails.fold(
      (success) => print("成功获取地点详情: $success"),
      (failure) => print("获取地点详情失败: $failure"),
    );
  } else {
    print("获取建议失败: ${suggestions.error}");
  }
}

静态地图图片生成

import 'package:mapbox_search/mapbox_search.dart';

Future<void> staticImageExample() async {
  MapBoxStaticImage staticImage = MapBoxStaticImage();

  String imageUrlWithMarker = staticImage.getStaticUrlWithMarker(
    center: Location(lat: 37.77343, lng: -122.46589),
    marker: MapBoxMarker(
        markerColor: Color.rgb(0, 0, 0), 
        markerLetter: 'p', 
        markerSize: MarkerSize.LARGE),
    height: 300,
    width: 600,
    zoomLevel: 16,
    style: MapBoxStyle.Mapbox_Streets,
    render2x: true,
  );

  print("静态地图URL: $imageUrlWithMarker");
}

以上就是关于如何在Flutter项目中使用mapbox_search插件的一些基本介绍和示例代码。希望这些信息对你有所帮助!如果你有任何问题或需要进一步的帮助,请随时提问。


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

1 回复

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


当然,以下是一个关于如何在Flutter应用中使用mapbox_search插件来实现地图搜索功能的代码案例。mapbox_search插件允许你在Mapbox地图上执行地点搜索,并获取搜索结果。

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

dependencies:
  flutter:
    sdk: flutter
  mapbox_gl: ^0.14.0  # 请检查最新版本
  mapbox_search: ^1.0.0  # 请检查最新版本

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

接下来,是完整的代码示例,展示如何使用mapbox_search插件在Flutter应用中实现地图搜索功能:

import 'package:flutter/material.dart';
import 'package:mapbox_gl/mapbox_gl.dart';
import 'package:mapbox_search/mapbox_search.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: MapScreen(),
    );
  }
}

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

class _MapScreenState extends State<MapScreen> {
  MapboxMapController? _mapController;
  final MapboxSearch _mapboxSearch = MapboxSearch(
    accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',  // 替换为你的Mapbox访问令牌
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mapbox Search Example'),
      ),
      body: Stack(
        children: <Widget>[
          MapboxMap(
            accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',  // 替换为你的Mapbox访问令牌
            initialCameraPosition: CameraPosition(
              target: LatLng(0.0, 0.0),
              zoom: 2.0,
            ),
            onMapCreated: (MapboxMapController controller) {
              _mapController = controller;
            },
          ),
          Positioned(
            bottom: 16.0,
            left: 16.0,
            child: TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Search location',
                suffixIcon: IconButton(
                  icon: Icon(Icons.search),
                  onPressed: _searchLocation,
                ),
              ),
              onSubmitted: _searchLocation,
            ),
          ),
        ],
      ),
    );
  }

  void _searchLocation(String? query) {
    if (query != null && query.isNotEmpty) {
      _mapboxSearch.search(query).then((results) {
        if (results.isNotEmpty) {
          // 使用第一个搜索结果
          final firstResult = results.first;
          _mapController?.animateCamera(
            CameraUpdate.newLatLngZoom(
              LatLng(firstResult.geometry!.coordinates!.latitude!, firstResult.geometry!.coordinates!.longitude!),
              14.0,
            ),
          );
        } else {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('No results found for "$query"')),
          );
        }
      }).catchError((error) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Search error: $error')),
        );
      });
    }
  }
}

在这个示例中,我们做了以下几件事:

  1. 引入了flutter, mapbox_gl, 和 mapbox_search包。
  2. MapScreen中创建了一个Mapbox地图,并在地图上叠加了一个搜索框。
  3. 当用户在搜索框中输入文本并点击搜索图标或按下回车键时,_searchLocation函数会被调用。
  4. _searchLocation函数使用mapbox_search插件执行搜索,并将地图视图动画到第一个搜索结果的位置。

请注意,你需要将YOUR_MAPBOX_ACCESS_TOKEN替换为你自己的Mapbox访问令牌。你可以通过注册Mapbox账户并创建一个API访问令牌来获取它。

希望这个示例能帮你快速上手在Flutter应用中使用mapbox_search插件!

回到顶部