Flutter室内地图导航插件mapsindoors_mapbox的使用

介绍

mapsindoors_mapbox 是一个用于在 Flutter 应用中集成原生 MapsIndoors SDK 的联邦插件。通过该插件，你可以实现室内地图显示、实时路径导航和位置实时更新等功能。

支持平台

特性

使用此插件可以：

• 显示室内地图和导航。
• 实现实时路径导航。
• 查看位置实时更新。

此插件基于 MapsIndoors V4 SDK for Android 和 iOS。

入门指南

添加依赖

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

dependencies:
  mapsindoors_mapbox: ^4.1.0

Android 配置

设置 Mapbox API Key

1. 导航到 android/app/src/main/res/value
2. 在此文件夹中创建一个名为 mapbox_api_key.xml 的文件
3. 复制并粘贴以下代码片段，并将 YOUR_KEY_HERE 替换为你的 Mapbox API Key

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="mapbox_api_key" translatable="false">YOUR_KEY_HERE</string>
    <string name="mapbox_access_token" translatable="false">YOUR_KEY_HERE</string>
</resources>

MapsIndoors Gradle 配置

1. 导航到应用的项目级别 build.gradle 文件
2. 在 allprojects/repositories 中添加以下内容，放在 mavenCentral() 之后

maven { url 'https://maven.mapsindoors.com/' }
maven {
    url 'https://api.mapbox.com/downloads/v2/releases/maven'
    authentication {
        basic(BasicAuthentication)
    }
    credentials {
        // 不要更改用户名，始终应为 `mapbox`（而不是你的用户名）
        username = "mapbox"
        // 使用你在 `gradle.properties` 中存储的秘密令牌作为密码
        password = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: ""
    }
}

1. 将你的 Mapbox 下载令牌添加到顶级 gradle.properties 文件中

MAPBOX_DOWNLOADS_TOKEN=YOUR_KEY_HERE

iOS 配置

确保你的 Podfile 配置为 iOS 14，并在应用目标中添加 use_frameworks!：

platform :ios, '14.0'

target 'MyApp' do
  use_frameworks!
  ...
end

提供 API Key

导航到你的应用设置，并将你的 Mapbox 公共访问令牌添加到 Info.plist 中，键为 MBXAccessToken。同时，设置你的秘密访问令牌以下载 SDK。详情请参阅 配置凭证。

使用示例

显示地图

以下代码展示了如何在 Flutter 应用中设置 MapsIndoors。首先，将 MapsIndoorsWidget 添加到应用的构建树中。

import 'package:flutter/material.dart';
import 'package:mapsindoors/mapsindoors.dart' as MapsIndoors;
import 'package:mapsindoors/mapsindoors_library.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MapWidget("demo"),
    );
  }
}

class MapWidget extends StatefulWidget {
  final String apiKey;

  const MapWidget({Key? key, required this.apiKey}) : super(key: key);

  @override
  MapWidgetState createState() => MapWidgetState();
}

class MapWidgetState extends State<MapWidget> {
  final _floorSelectorWidget = MPDefaultFloorSelector();
  late final MapsIndoorsWidget _mapController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: _mapController = MapsIndoorsWidget(
          floorSelector: _floorSelectorWidget,
          initialCameraPosition: MPCameraPosition(zoom: 7, point: MPPoint.withCoordinates(longitude: -118.0165, latitude: 33.9457)),
          readyListener: _mapControlReadyListener,
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    loadMapsIndoors(widget.apiKey);
  }

  void _mapControlReadyListener(MPError? error) async {
    if (error == null) {
      _mapController.goTo(await getDefaultVenue());
    } else {
      print("Creating mapcontrol faced an issue: $error");
    }
  }
}

显示路线

以下代码初始化了 MPDirectionsService 和 MPDirectionsRenderer 类，并使用已初始化的 _mapControl 查询从用户当前位置到指定位置的路线。

late final _mapControl;

var _userLocation = MPPoint.withCoordinates(longitude: -98.44, latitude: 35.16);

void showRouteToLocation(MPLocation location) async {
  final directionsService = MPDirectionsService();
  final directionsRenderer = MPDirectionsRenderer();

  directionsService.getRoute(origin: _userLocation, destination: location.point).then((route) {
    directionsRenderer.setRoute(route);
  }).catchError((err) => print("An error occurred: $err"));
}

搜索地点

以下代码展示了如何搜索匹配查询字符串 “parking” 的地点。

void searchForParking(MPPoint point) {
  final mpq = MPQuery.builder()
    ..setQuery("parking")
    ..setNear(point)
    ..setQueryProperties([MPLocationPropertyNames.description.name, MPLocationPropertyNames.name.name, MPLocationPropertyNames.externalId.name]);

  getLocationsByQuery(query: mpq.build()).then((locations) {
    print("Number of parking spots near the point: ${locations?.length}");
    // 处理找到的地点
  });
}

自定义显示规则

以下代码展示了如何操作显示规则，例如隐藏所有标记、显示所有标记以及更改特定类型的多边形颜色。

void hideLocationsByDefault() async {
  final MPDisplayRule? main = await getMainDisplayRule();
  main?.setVisible(false);
}

void showLocationsByDefault() async {
  final MPDisplayRule? main = await getMainDisplayRule();
  main?.setVisible(true);
}

void changeTypePolygonColor(String type, Color color) async {
  final MPDisplayRule? rule = await getDisplayRuleByName(type);
  rule?.setPolygonFillColor(color);
}

完整示例

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 mapsindoors_mapbox 插件。

import 'package:flutter/material.dart';
import 'package:mapsindoors_mapbox/mapsindoors.dart';
import 'package:mapsindoors_example/route_handler.dart';
import 'package:mapsindoors_example/example_position_provider.dart';

void main() {
  runApp(const MapsIndoorsDemoApp());
}

class MapsIndoorsDemoApp extends StatelessWidget {
  const MapsIndoorsDemoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MapsIndoors Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Map(apiKey: 'demo'),
    );
  }
}

class Map extends StatefulWidget {
  const Map({super.key, required this.apiKey});
  final String apiKey;

  @override
  State<Map> createState() => _MapState();
}

class _MapState extends State<Map> {
  final _scaffoldKey = GlobalKey<ScaffoldState>();
  PersistentBottomSheetController? _controller;

  late MapsIndoorsWidget _mapControl;
  final _positionProvider = ExamplePositionProvider();
  List<MPLocation> _searchResults = [];
  final _userPosition = MPPoint.withCoordinates(
      longitude: -77.03740973527613,
      latitude: 38.897389429704695,
      floorIndex: 0);
  RouteHandler? _routeHandler;

  @override
  void initState() {
    super.initState();
    loadMapsIndoors(widget.apiKey).then((error) {
      if (error == null) {
        setPositionProvider(_positionProvider);
      }
    });
  }

  void onMapControlReady(MPError? error) async {
    if (error == null) {
      _mapControl
        ..setOnLocationSelectedListener(onLocationSelected, false)
        ..goTo(await getDefaultVenue());

      _positionProvider.updatePosition(_userPosition, accuracy: 25, bearing: 0.0, floorIndex: 0);
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text("Map load failed: $error"),
        backgroundColor: Colors.red,
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: SearchWidget(
          onSubmitted: search,
        ),
      ),
      drawer: Drawer(
        child: Flex(
          direction: Axis.vertical,
          children: [
            Expanded(
              child: _searchResults.isNotEmpty
                  ? ListView.builder(
                      itemBuilder: (ctx, i) {
                        return ListTile(
                          onTap: () {
                            _mapControl.selectLocation(_searchResults[i]);
                            _scaffoldKey.currentState?.closeDrawer();
                          },
                          title: Text(_searchResults[i].name),
                        );
                      },
                      itemCount: _searchResults.length,
                    )
                  : const Icon(Icons.search_off, color: Colors.black, size: 100.0),
            ),
          ],
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            _mapControl = MapsIndoorsWidget(
              readyListener: onMapControlReady,
            ),
          ],
        ),
      ),
    );
  }

  void search(String value) {
    if (value.isEmpty) {
      _mapControl.clearFilter();
      setState(() {
        _searchResults = [];
      });
      return;
    }

    MPQuery query = (MPQueryBuilder()..setQuery(value)).build();
    MPFilter filter = (MPFilterBuilder()..setTake(30)).build();

    final scaffold = ScaffoldMessenger.of(context);

    getLocationsByQuery(query: query, filter: filter).then((locations) {
      if (locations != null && locations.isNotEmpty) {
        setState(() {
          _searchResults = locations;
          _scaffoldKey.currentState?.openDrawer();
        });
        _mapControl.setFilterWithLocations(locations, MPFilterBehavior.DEFAULT);
      }
    }).catchError((err) {
      if (mounted) return;
      scaffold.showSnackBar(SnackBar(
        content: Text("Search failed: $err"),
        backgroundColor: Colors.red,
      ));
    });
  }

  void enableLiveData() {
    _mapControl
      ..enableLiveData(LiveDataDomainTypes.availability.name)
      ..enableLiveData(LiveDataDomainTypes.occupancy.name)
      ..enableLiveData(LiveDataDomainTypes.position.name);
  }

  void onLocationSelected(MPLocation? location) {
    if (location == null) {
      _controller?.close();
      _controller = null;
      return;
    }

    _routeHandler?.removeRoute();

    _controller = _scaffoldKey.currentState?.showBottomSheet((context) {
      return Container(
        color: Colors.white,
        padding: const EdgeInsets.only(bottom: 50.0, left: 100, right: 100),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const SizedBox(height: 30),
            Text(location.name),
            const SizedBox(height: 30),
            Text("Description: ${location.description}"),
            const SizedBox(height: 30),
            Text("Building: ${location.buildingName} - ${location.floorName}"),
            const SizedBox(height: 30),
            ElevatedButton(
              onPressed: () => _routeHandler = RouteHandler(
                  origin: _userPosition,
                  destination: location.point,
                  scaffold: _scaffoldKey.currentState!),
              child: const Row(
                children: [
                  Icon(Icons.keyboard_arrow_left_rounded),
                  SizedBox(width: 5),
                  Text("directions")
                ],
              ),
            ),
          ],
        ),
      );
    });
    _controller?.closed.then((value) => _mapControl.selectLocation(null));
  }
}

以上代码展示了如何在 Flutter 应用中使用 mapsindoors_mapbox 插件来实现室内地图显示、路径导航和地点搜索功能。希望这些示例对你有所帮助！