Flutter地图展示插件x_map的使用

Flutter地图展示插件x_map的使用

基于高德开放平台地图SDK的二次开发Flutter插件，扩展了一些原本插件不支持的Android部分功能。

使用说明

使用Flutter插件，添加x_map的引用。

准备工作

1. 登录高德开放平台官网申请ApiKey。Android平台申请配置key请参考Android获取key，iOS平台申请配置请参考iOS获取key。
2. 引入高德地图SDK，Android平台请参考Android Studio配置工程，iOS平台请参考ios安装地图SDK。
3. iOS端插件使用特殊配置：Flutter 1.22.0 之前（之后的版本可以不添加该配置），iOS端的UiKitView还只是preview状态，默认是不支持的，需要手动打开开关，在iOS工程的info.plist添加如下配置：

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>

使用示例

以下是一个完整的示例代码，展示了如何使用x_map插件来展示地图。

import 'package:x_map_example/base_page.dart';
import 'package:flutter/material.dart';

import 'package:x_map/amap_flutter_map.dart';
import 'package:amap_flutter_base/amap_flutter_base.dart';

class ShowMapPage extends BasePage {
  ShowMapPage(String title, String subTitle) : super(title, subTitle);
  [@override](/user/override)
  Widget build(BuildContext context) {
    return _ShowMapPageBody();
  }
}

class _ShowMapPageBody extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() => _ShowMapPageState();
}

class _ShowMapPageState extends State<_ShowMapPageBody> {
  // 初始地图位置
  static final CameraPosition _kInitialPosition = const CameraPosition(
    target: LatLng(39.909187, 116.397451), // 北京经纬度
    zoom: 10.0,
  );

  // 审图号列表
  List<Widget> _approvalNumberWidget = List<Widget>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    final AMapWidget map = AMapWidget(
      initialCameraPosition: _kInitialPosition,
      onMapCreated: onMapCreated,
    );

    return ConstrainedBox(
      constraints: BoxConstraints.expand(),
      child: Stack(
        alignment: Alignment.center,
        children: [
          Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: map,
          ),
          Positioned(
              right: 10,
              bottom: 15,
              child: Container(
                alignment: Alignment.centerLeft,
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: _approvalNumberWidget),
              ))
        ],
      ),
    );
  }

  AMapController _mapController;
  void onMapCreated(AMapController controller) {
    setState(() {
      _mapController = controller;
      getApprovalNumber();
    });
  }

  /// 获取审图号
  void getApprovalNumber() async {
    // 普通地图审图号
    String mapContentApprovalNumber =
        await _mapController?.getMapContentApprovalNumber();
    // 卫星地图审图号
    String satelliteImageApprovalNumber =
        await _mapController?.getSatelliteImageApprovalNumber();
    setState(() {
      if (null != mapContentApprovalNumber) {
        _approvalNumberWidget.add(Text(mapContentApprovalNumber));
      }
      if (null != satelliteImageApprovalNumber) {
        _approvalNumberWidget.add(Text(satelliteImageApprovalNumber));
      }
    });
    print('地图审图号（普通地图）: $mapContentApprovalNumber');
    print('地图审图号（卫星地图): $satelliteImageApprovalNumber');
  }
}