Flutter地图搜索插件mapbox_search_widget的使用

关于

这个插件提供了与 mapbox_search 库一起使用的部件。它还包含一个静态地图图像生成器 😆。

安装

在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  mapbox_search_widget: any

示例

以下是使用 MapBoxPlaceSearchWidget 的示例代码：

MapBoxPlaceSearchWidget(
  popOnSelect: true, // 点击选择后是否关闭弹窗
  apiKey: "API KEY", // 替换为你的 Mapbox API 密钥
  limit: 10, // 搜索结果的最大数量
  searchHint: 'Your Hint here', // 搜索框的提示文字
  onSelected: (place) { // 当用户选择一个地点时触发的回调函数
    print(place.placeName); // 打印选中的地点名称
  },
  context: context, // 当前上下文
)

截图

搜索小部件

完整示例代码

以下是完整的示例代码，展示如何在 Flutter 中使用 mapbox_search_widget 插件。

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

void main() => runApp(MyApp());

const kApiKey = 'YOUR_API_KEY'; // 替换为你的 Mapbox API 密钥

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    assert(kApiKey != 'YOUR_API_KEY',
        "You must provide an API Key in order to run this example.");

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapBoxExample(),
    );
  }
}

class MapBoxExample extends StatefulWidget {
  [@override](/user/override)
  _MapBoxExampleState createState() => _MapBoxExampleState();
}

class _MapBoxExampleState extends State<MapBoxExample> {
  MapBoxStaticImage staticImage = MapBoxStaticImage(apiKey: kApiKey);

  Future<List<MapBoxPlace>> getPlaces() async {
    ReverseGeoCoding reverseGeoCoding = ReverseGeoCoding(
      apiKey: kApiKey,
      limit: 5,
    );
    return await reverseGeoCoding.getAddress(Location(
        lat: 48.8584, // 这是埃菲尔铁塔的位置
        lng: 2.2945));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MapBox Api Example'),
      ),
      floatingActionButton: FloatingActionButton.extended(
        label: Text('Search'),
        icon: Icon(Icons.search),
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => SearchPage(),
            ),
          );
        },
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: [
          Text(
            'Static Image with Marker',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          Expanded(
            child: Image.network(
              getStaticImageWithMarker(),
              fit: BoxFit.cover,
            ),
          ),
          InkWell(
            onTap: () async {
              var places = await getPlaces();
              print(places.length);
            },
            child: Text(
              'Static Image with polyline',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
          ),
          Expanded(
            child: Image.network(
              getStaticImageWithPolyline(),
              fit: BoxFit.cover,
            ),
          ),
          Text(
            'Static Image without Marker',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          Expanded(
            child: Image.network(
              getStaticImageWithoutMarker(),
              fit: BoxFit.cover,
            ),
          ),
        ],
      ),
    );
  }

  String getStaticImageWithPolyline() => staticImage.getStaticUrlWithPolyline(
        point1: Location(lat: 37.77343, lng: -122.46589),
        point2: Location(lat: 37.75965, lng: -122.42816),
        marker1: MapBoxMarker(
            markerColor: Color.rgb(0, 0, 0),
            markerLetter: 'p',
            markerSize: MarkerSize.LARGE),
        msrker2: MapBoxMarker(
            markerColor: Color.rgb(244, 67, 54),
            markerLetter: 'q',
            markerSize: MarkerSize.SMALL),
        height: 300,
        width: 600,
        zoomLevel: 16,
        style: MapBoxStyle.Dark,
        path: MapBoxPath(
          pathColor: Color.rgb(244, 0, 0),
          pathOpacity: 0.5,
          pathWidth: 5,
          pathPolyline:
              "%7DrpeFxbnjVsFwdAvr@cHgFor@jEmAlFmEMwM_FuItCkOi@wc@bg@wBSgM",
        ),
        render2x: true,
      );

  String getStaticImageWithMarker() => 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.Streets,
        render2x: true,
      );

  String getStaticImageWithoutMarker() => staticImage.getStaticUrlWithoutMarker(
        center: Location(lat: 37.75965, lng: -122.42816),
        height: 300,
        width: 600,
        zoomLevel: 16,
        style: MapBoxStyle.Outdoors,
        render2x: true,
      );
}

class SearchPage extends StatelessWidget {
  const SearchPage({Key key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.arrow_back_ios),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
      body: SafeArea(
        bottom: false,
        child: MapBoxPlaceSearchWidget(
          popOnSelect: true,
          apiKey: kApiKey,
          searchHint: 'Search around',
          onSelected: (place) {
            print(place.placeName); // 打印选中的地点名称
          },
          context: context,
        ),
      ),
    );
  }
}