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

在Flutter 3中集成高德地图插件时遇到了问题，按照官方文档配置后地图无法显示。具体步骤如下：

  1. 已添加amap_flutter_map和amap_flutter_location依赖
  2. 在AndroidManifest.xml中配置了API Key
  3. 初始化了AMapServices.setApiKey()
    但运行后只显示灰色网格，没有地图内容。控制台无报错信息，请问可能是什么原因？是否需要额外权限配置或Flutter 3有兼容性问题？
2 回复

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

dependencies:
  amap_flutter_map: ^3.0.0

然后运行flutter pub get，并在代码中导入：

import 'package:amap_flutter_map/amap_flutter_map.dart';

最后在AndroidManifest.xml和Info.plist中配置高德地图的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  # 检查最新版本

运行 flutter pub get 安装。

2. 配置平台权限

Android:

  • 在 android/app/src/main/AndroidManifest.xml 中添加权限和 API Key：
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<application>
  <meta-data
    android:name="com.amap.api.v2.apikey"
    android:value="YOUR_ANDROID_API_KEY" />
</application>

iOS:

  • 在 ios/Runner/Info.plist 中添加权限描述和 Key：
<key>NSLocationWhenInUseUsageDescription</key>
<string>需要定位权限以展示地图</string>
<key>AMapApiKey</key>
<string>YOUR_IOS_API_KEY</string>

3. 获取高德地图 API Key

  • 前往 高德开放平台 注册账号，创建应用并获取 Key（分 Android 和 iOS）。

4. 基本使用示例

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

class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AMapWidget(
        apiKey: const AMapApiKey(
          androidKey: 'YOUR_ANDROID_API_KEY',
          iosKey: 'YOUR_IOS_API_KEY',
        ),
        onMapCreated: (controller) {
          // 地图创建回调
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(39.90960, 116.397228), // 初始坐标（北京）
          zoom: 15, // 缩放级别
        ),
      ),
    );
  }
}

5. 常用功能

  • 添加标记：使用 Markers 属性配置 Marker 对象。
  • 定位按钮：通过 myLocationEnabled: true 开启定位。
  • 手势交互：支持缩放、拖动等默认手势。

注意事项：

  • 确保权限在真机测试时已授权。
  • 不同平台需单独申请 Key。
  • 参考官方文档 amap_flutter_map 获取高级功能。

通过以上步骤即可在 Flutter 3 中快速集成高德地图。

回到顶部