示例中心
功能在线体验
menu 导航 closed 关闭

高德 开发 Flutter插件 开发指南 地图Flutter插件 创建地图

更新时间:2021年01月05日

显示地图

Widget build(BuildContext context) {
  ///使用默认属性创建一个地图
  final AMapWidget map = AMapWidget(
    apiKey: ConstConfig.amapApiKeys,
    onMapCreated: onMapCreated,
  );
  return Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
    	child: map,
  );
}

获取审图号

任何使用高德地图API调用地图服务的应用必须在其应用中对外透出审图号,如高德地图在“关于”中的体现。

获取审图号应该在地图创建完成后进行,一般在onMapCreated回调里通过AMapController获取即可。 

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

/// 获取审图号
  void getApprovalNumber() async {
    //普通地图审图号
    String mapContentApprovalNumber =
        await _mapController?.getMapContentApprovalNumber();
    //卫星地图审图号
    String satelliteImageApprovalNumber =
        await _mapController?.getSatelliteImageApprovalNumber();
  }
效果展示

 

限制地图的显示范围

通过设置显示范围属性,限定手机屏幕只能显示设定的地图范围。例如:希望仅显示北京市区地图,可以通过该属性完成。

示例代码: 

final AMapWidget amap = AMapWidget(
      apiKey: ConstConfig.amapApiKeys,
  		//限制显示区域
      limitBounds: LatLngBounds(
          southwest: LatLng(39.83309, 116.290176),
          northeast: LatLng(39.99951, 116.501663)),
 );

切换地图图层

高德地图Flutter插件提供了几种预置的地图图层,包括卫星图、白昼地图(即最常见的黄白色地图)、夜景地图、导航地图、路况图层。

图层类型枚举类为MapType: 

/// 视图类型
enum MapType {
  /// 普通视图
  normal,

  /// 卫星视图
  satellite,

  /// 夜间视图
  night,

  /// 导航视图
  navi,

  /// 公交视图
  bus,
}

图层可以在创建地图是直接指定,也可以后续通过setState方法直接修改AMapWidget的mapType属性实现。

下面这段代码演示的是通过setState修改mapType属性的方式。

//地图类型
MapType _mapType;
Widget build(BuildContext context) {
    //创建地图
    final AMapWidget map = AMapWidget(
      apiKey: ConstConfig.amapApiKeys,
      //地图图层类型属性
      mapType: _mapType ?? MapType.normal,
    );
    return Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            height: MediaQuery.of(context).size.height * 0.6,
            width: MediaQuery.of(context).size.width,
            child: map,
          ),
          Expanded(
            child: SingleChildScrollView(
              child: Container(
                child: AMapRadioGroup(
                  groupLabel: '地图样式',
                  groupValue: _mapType,
                  radioValueMap: _radioValueMap,
                  onChanged: (value) => {
                    //改变当前地图样式为选中的样式
                    setState(() {
                      _mapType = value;
                    })
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
效果展示

卫星地图 

黑夜模式

 

自定义地图

  1. 高德地图开放平台的开发者在取得开发者账号后,可以进入开发者控制台,在地图自定义平台选择“创建地图样式”,可以选择一个模板进行创建。
  2. 创建完成后下载对应的自定义文件,放到Flutter工程中
  3. 在包含AMapWidget的State的中加载相应的自定义文件
  4. 将自定内容赋值给AMapWidget的customStyleOptions
//创建一个带自定义地图样式参数的AMapWidget
final AMapWidget map = AMapWidget(
      apiKey: ConstConfig.amapApiKeys,
      onMapCreated: onMapCreated,
      customStyleOptions: _customStyleOptions,
    );

//默认设置为不使用自定义地图,如果需要直接显示,在初始化是设置为true
CustomStyleOptions _customStyleOptions = CustomStyleOptions(false);
//加载自定义地图样式
  void _loadCustomData() async {
    if (null == _customStyleOptions) {
      _customStyleOptions = CustomStyleOptions(false);
    }
    ByteData styleByteData = await rootBundle.load('assets/style.data');
    _customStyleOptions.styleData = styleByteData.buffer.asUint8List();
    ByteData styleExtraByteData =
        await rootBundle.load('assets/style_extra.data');
    _customStyleOptions.styleExtraData =
        styleExtraByteData.buffer.asUint8List();
    //如果需要加载完成后直接展示自定义地图,可以通过setState修改CustomStyleOptions的enable为true
    setState(() {
      _customStyleOptions.enabled = true;
    });
  }


新用户
福利
示例
中心
常见
问题