Flutter地图展示插件sbb_maps_flutter的使用

介绍

sbb_maps_flutter 是一个用于将 SBB 风格的地图集成到 Flutter 应用中的插件。它基于 MapLibre 构建，并作为 Journey Maps API 的客户端。为了使用样式和路由功能，你需要在 developer.sbb.ch 注册你的应用程序以获取 API 密钥。

开始使用

支持的平台

• Android
• iOS

前提条件

要访问样式和瓦片数据，你需要注册你的应用程序到 Journey Maps Tiles API 来获取 API 密钥。创建一个账户（例如使用 SwissPass 登录）来设置应用程序并注册到 API。

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  sbb_maps_flutter: ^latest_version

然后运行 flutter pub get。

代码使用

API 密钥

你可以通过环境变量或使用包如 envied 来处理 API 密钥。以下是如何使用 envied 处理 API 密钥的示例：

SBBRokasMapStyler.full(apiKey: Env.MY_API_KEY_NAME);

添加地图

下面是一个简单的地图添加示例：

SBBMap(
  initialCameraPosition: const SBBCameraPosition(
    target: LatLng(46.947456, 7.451123), // Bern
    zoom: 15.0,
  ),
  mapStyler: _customStylerWithApiKey, // 如上所示
)

访问用户位置

该插件使用 geolocator 插件来访问设备位置并请求用户的权限。你需要在 Info.plist 和 AndroidManifest.xml 中添加相应的权限声明。

iOS

在 Info.plist 中添加：

<key>NSLocationWhenInUseUsageDescription</key>
<string>YOUR DESCRIPTION WHY YOU NEED ACCESS TO THE MAP</string>

Android

在 AndroidManifest.xml 中添加：

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

地图构建时聚焦用户位置

要在构建 SBBMap 时直接将地图相机聚焦到设备位置，可以使用 OnMapLocatorAvailable 回调和 SBBMapLocator.trackDeviceLocation() 方法。这会提示用户授予权限（如果尚未授予）。

示例代码如下：

const _bern = SBBCameraPosition(target: LatLng(46.947456, 7.451123), zoom: 13.0)

class StandardMapRoute extends StatelessWidget {
  const StandardMapRoute({super.key});
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const SBBHeader(title: 'Standard'),
      body: SBBMap(
        isMyLocationEnabled: true,
        mapStyler: SBBRokasMapStyler.full(), // API key in ENV var 'JOURNEY_MAPS_TILES_API_KEY'
        initialCameraPosition: _bern, // 指定此参数会使地图从较小的缩放级别开始
        onMapLocatorAvailable: (locator) => locator.trackDeviceLocation(),
      ),
    );
  }
}

示例应用

完整的示例应用可以在 GitHub 上找到，包含多个演示不同功能的路由。

简单地图示例

class SimpleMapRoute extends StatelessWidget {
  const SimpleMapRoute({super.key});
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const SBBHeader(title: 'Simple Map'),
      body: SBBMap(
        isMyLocationEnabled: true,
        mapStyler: SBBRokasMapStyler.full(), // API key in ENV var 'JOURNEY_MAPS_TILES_API_KEY'
      ),
    );
  }
}

聚焦设备位置示例

const _bern = SBBCameraPosition(target: LatLng(46.947456, 7.451123), zoom: 13.0)

class FocusDeviceLocationRoute extends StatelessWidget {
  const FocusDeviceLocationRoute({super.key});
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const SBBHeader(title: 'Focus Device Location'),
      body: SBBMap(
        isMyLocationEnabled: true,
        mapStyler: SBBRokasMapStyler.full(), // API key in ENV var 'JOURNEY_MAPS_TILES_API_KEY'
        initialCameraPosition: _bern, // 指定此参数会使地图从较小的缩放级别开始
        onMapLocatorAvailable: (locator) => locator.trackDeviceLocation(),
      ),
    );
  }
}