Flutter地图展示插件apple_maps_flutter的使用

Flutter 地图展示插件 apple_maps_flutter 的使用

apple_maps_flutter 是一个用于在 Flutter 应用程序中嵌入 Apple 地图的插件。它基于 Flutter 的机制来嵌入 Android 和 iOS 视图。由于该机制目前处于开发者预览阶段，因此此插件也应被视为开发者预览。

该插件最初是基于 google_maps_flutter 插件开发的。为了简化将 google_maps_flutter 插件与 apple_maps_flutter 结合以创建跨平台实现（如 Android 和 iOS）的过程，该插件也使用了 google_maps_flutter 插件的 Flutter 实现。这还帮助创建了一个名为 flutter_platform_maps 的跨平台实现。

截图

示例 1	示例 2

iOS

要在 iOS 上使用此插件，你需要通过在应用的 Info.plist 文件中添加一个布尔属性来启用嵌入视图预览。属性键为 io.flutter.embedded_views_preview，值为 YES。你还需要添加 Privacy - Location When In Use Usage Description 键，并提供相应的使用描述。

Android

该插件目前没有 Android 实现。但是，有一个包结合了 apple_maps_flutter 和 google_maps_flutter 插件，以实现典型的地图实现，称为 platform_maps_flutter。

示例用法

以下是一个简单的示例代码，展示了如何使用 apple_maps_flutter 插件：

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

class AppleMapsExample extends StatelessWidget {
  AppleMapController mapController;

  // 当地图创建完成时调用此方法
  void _onMapCreated(AppleMapController controller) {
    mapController = controller;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          child: Container(
            child: AppleMap(
              onMapCreated: _onMapCreated, // 地图创建完成时调用的回调
              initialCameraPosition: const CameraPosition(
                target: LatLng(0.0, 0.0), // 初始地图中心点
              ),
            ),
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Column(
              children: <Widget>[
                FlatButton(
                  onPressed: () {
                    mapController.moveCamera(
                      CameraUpdate.newCameraPosition(
                        const CameraPosition(
                          heading: 270.0,
                          target: LatLng(51.5160895, -0.1294527),
                          pitch: 30.0,
                          zoom: 17,
                        ),
                      ),
                    );
                  },
                  child: const Text('newCameraPosition'), // 移动到新的相机位置
                ),
                FlatButton(
                  onPressed: () {
                    mapController.moveCamera(
                      CameraUpdate.newLatLngZoom(
                        const LatLng(37.4231613, -122.087159),
                        11.0,
                      ),
                    );
                  },
                  child: const Text('newLatLngZoom'), // 移动到新的经纬度并缩放
                ),
              ],
            ),
            Column(
              children: <Widget>[
                FlatButton(
                  onPressed: () {
                    mapController.moveCamera(
                      CameraUpdate.zoomIn(), // 放大
                    );
                  },
                  child: const Text('zoomIn'),
                ),
                FlatButton(
                  onPressed: () {
                    mapController.moveCamera(
                      CameraUpdate.zoomOut(), // 缩小
                    );
                  },
                  child: const Text('zoomOut'),
                ),
                FlatButton(
                  onPressed: () {
                    mapController.moveCamera(
                      CameraUpdate.zoomTo(16.0), // 缩放到特定级别
                    );
                  },
                  child: const Text('zoomTo'),
                ),
              ],
            ),
          ],
        )
      ],
    );
  }
}

完整示例代码

以下是一个完整的示例代码，展示了如何使用 apple_maps_flutter 插件创建一个包含多种功能的地图应用：

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

void main() {
  runApp(MaterialApp(home: AppleMapsExample()));
}

class AppleMapsExample extends StatelessWidget {
  AppleMapController mapController;

  void _onMapCreated(AppleMapController controller) {
    mapController = controller;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          child: Container(
            child: AppleMap(
              onMapCreated: _onMapCreated,
              initialCameraPosition: const CameraPosition(
                target: LatLng(0.0, 0.0),
              ),
            ),
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Column(
              children: <Widget>[
                FlatButton(
                  onPressed: () {
                    mapController.moveCamera(
                      CameraUpdate.newCameraPosition(
                        const CameraPosition(
                          heading: 270.0,
                          target: LatLng(51.5160895, -0.1294527),
                          pitch: 30.0,
                          zoom: 17,
                        ),
                      ),
                    );
                  },
                  child: const Text('newCameraPosition'),
                ),
                FlatButton(
                  onPressed: () {
                    mapController.moveCamera(
                      CameraUpdate.newLatLngZoom(
                        const LatLng(37.4231613, -122.087159),
                        11.0,
                      ),
                    );
                  },
                  child: const Text('newLatLngZoom'),
                ),
              ],
            ),
            Column(
              children: <Widget>[
                FlatButton(
                  onPressed: () {
                    mapController.moveCamera(
                      CameraUpdate.zoomIn(),
                    );
                  },
                  child: const Text('zoomIn'),
                ),
                FlatButton(
                  onPressed: () {
                    mapController.moveCamera(
                      CameraUpdate.zoomOut(),
                    );
                  },
                  child: const Text('zoomOut'),
                ),
                FlatButton(
                  onPressed: () {
                    mapController.moveCamera(
                      CameraUpdate.zoomTo(16.0),
                    );
                  },
                  child: const Text('zoomTo'),
                ),
              ],
            ),
          ],
        )
      ],
    );
  }
}