Flutter 地图快照生成插件 mapkit_snapshotter_flutter_plus 的使用

MapKit Snapshotter

mapkit_snapshotter_flutter_plus 是一个 Flutter 插件，提供了 MKMapSnapshotter。此插件与 Flutter 的默认 Image 组件集成。

截图

示例 1 (标准)	示例 2 (混合)

使用方法

该插件仅在 iOS 平台上可用，因为它依赖于 MapKit SDK。

使用示例

final widget = Image(
  image: MapKitSnapshotterImage(
    MapKitSnapshotterOptions(
      /// 定义要捕获的区域。
      region: MapKitSnapshotterRegion(
        centerLatitude: 53.552363,
        centerLongitude: 9.990831,
        latitudeMeters: 2000,
        longitudeMeters: 2000,
      ),
      /// 额外的快照属性。
      brightness: MapKitSnapshotterBrightness.light,
      mapType: MapKitSnapshotterMapType.hybridFlyover,
    ),
  ),
  height: 100,
  width: 100,
);

/// ... 使用你的 widget

功能和错误报告

请在 问题跟踪器 中提交功能请求或错误报告。

示例代码

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

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

import 'demo.dart';

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

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

class _MyAppState extends State<MyApp> {
  MapKitSnapshotterBrightness brightness = MapKitSnapshotterBrightness.light;
  int mapType = 0;
  bool showsBuildings = false;
  bool showsPointsOfIntereset = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('MapKit Snapshotter 示例'),
        ),
        body: Container(
          width: double.infinity,
          child: Column(
            children: [
              Image(
                image: MapKitSnapshotterImage(
                  MapKitSnapshotterOptions(
                    region: MapKitSnapshotterRegion(
                      centerLatitude: 53.552363,
                      centerLongitude: 9.990831,
                      latitudeMeters: 1000,
                      longitudeMeters: 1000,
                    ),
                    brightness: brightness,
                    mapType: MapKitSnapshotterMapType.values[mapType],
                    showsBuildings: showsBuildings,
                    showsPointsOfInterest: showsPointsOfIntereset,
                  ),
                ),
                width: 350,
                height: 200,
              ),
              Column(
                children: [
                  Text('亮度: ${brightness.toString()}'),
                  Text('地图类型: ${MapKitSnapshotterMapType.values[mapType]}'),
                ],
              ),
              Column(
                children: [
                  MaterialButton(
                    child: Text('切换亮度'),
                    onPressed: () {
                      setState(() {
                        var newBrightness = MapKitSnapshotterBrightness.light;
                        if (this.brightness == MapKitSnapshotterBrightness.light) {
                          newBrightness = MapKitSnapshotterBrightness.dark;
                        }

                        this.brightness = newBrightness;
                      });
                    },
                  ),
                  MaterialButton(
                    child: Text('切换地图类型'),
                    onPressed: () {
                      setState(() {
                        mapType++;
                        if (mapType >= MapKitSnapshotterMapType.values.length) {
                          mapType = 0;
                        }
                      });
                    },
                  ),
                  MaterialButton(
                    child: Text('${showsBuildings ? '隐藏' : '显示'}建筑物'),
                    onPressed: () {
                      setState(() {
                        showsBuildings = !showsBuildings;
                      });
                    },
                  ),
                  MaterialButton(
                    child: Text('${showsPointsOfIntereset ? '隐藏' : '显示'}兴趣点'),
                    onPressed: () {
                      setState(() {
                        showsPointsOfIntereset = !showsPointsOfIntereset;
                      });
                    },
                  ),
                  Builder(
                    builder: (context) {
                      return MaterialButton(
                        child: Text('打开演示'),
                        onPressed: () {
                          Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => DemoRoute()));
                        },
                      );
                    },
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}