Flutter 3中如何使用高德地图插件

在Flutter 3中集成高德地图插件时，按照官方文档配置后地图无法显示，控制台也没有报错信息。具体步骤：

  1. 已添加amap_flutter_map和amap_flutter_location依赖
  2. 在AndroidManifest.xml配置了正确的key和权限
  3. 在iOS的Info.plist也添加了高德相关配置
    但运行后只显示灰色网格，没有地图内容。请问可能是什么原因？是否需要额外设置？
2 回复

在Flutter 3中使用高德地图插件，首先在pubspec.yaml中添加依赖：

dependencies:
  amap_flutter_map: ^x.x.x

然后运行flutter pub get。在代码中导入包并配置Android和iOS的API密钥即可使用。

更多关于Flutter 3中如何使用高德地图插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 3 中使用高德地图插件，推荐使用 amap_flutter_map 官方插件。以下是详细步骤：

1. 添加依赖

在 pubspec.yaml 文件中添加：

dependencies:
  amap_flutter_map: ^3.0.0 # 检查最新版本

2. 配置平台参数

Android 配置：

  • 在 AndroidManifest.xml 的 <application> 标签内添加：
<meta-data
  android:name="com.amap.api.v2.apikey"
  android:value="您的Android端高德Key"/>

iOS 配置：

  • 在 Info.plist 中添加：
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>AMapApiKey</key>
<string>您的iOS端高德Key</string>

3. 基本使用示例

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

class MapSample extends StatefulWidget {
  @override
  _MapSampleState createState() => _MapSampleState();
}

class _MapSampleState extends State<MapSample> {
  static final CameraPosition _kInitialPosition = const CameraPosition(
    target: LatLng(39.909187, 116.397451), // 北京坐标
    zoom: 10,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AMapWidget(
        apiKey: const AMapApiKey(
          androidKey: '您的Android Key',
          iosKey: '您的iOS Key',
        ),
        initialCameraPosition: _kInitialPosition,
        onMapCreated: (AMapController controller) {
          // 地图创建完成回调
        },
      ),
    );
  }
}

4. 常用功能

  • 添加标记：
Marker marker = Marker(
  position: LatLng(39.909187, 116.397451),
  icon: BitmapDescriptor.defaultMarker,
);
  • 移动视角：
controller.moveCamera(CameraUpdate.newLatLngZoom(target, zoom));

注意事项

  1. 需要分别申请 Android 和 iOS 平台的高德地图 Key
  2. iOS 需在 Info.plist 中配置定位权限描述
  3. 建议在真机上测试定位功能

通过以上步骤即可在 Flutter 3 中快速集成高德地图基础功能。如需更多高级功能，请参考官方文档：https://pub.dev/packages/amap_flutter_map

回到顶部