Flutter如何集成高德地图SDK

在Flutter项目中集成高德地图SDK时遇到了问题，按照官方文档配置后依然无法正常显示地图。具体步骤包括：

  1. 在pubspec.yaml添加amap_flutter_map依赖
  2. 配置AndroidManifest.xml的API_KEY
  3. 初始化AMapService
    但运行时出现黑屏或"INVALID_USER_KEY"错误。请问正确的集成流程是什么？是否需要额外配置iOS端？如何解决密钥验证失败的问题？
2 回复

在Flutter中集成高德地图，首先在pubspec.yaml添加amap_flutter_map依赖。然后在Android的AndroidManifest.xml和iOS的Info.plist中配置高德地图的AppKey。最后在代码中引入并使用AMapWidget组件即可显示地图。

更多关于Flutter如何集成高德地图SDK的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中集成高德地图SDK，主要使用高德官方提供的amap_flutter_map插件。以下是详细步骤：

1. 添加依赖

在pubspec.yaml文件中添加依赖：

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

2. 获取高德Key

3. 平台配置

Android配置 (android/app/src/main/AndroidManifest.xml)：

<application>
  <meta-data
    android:name="com.amap.api.v2.apikey"
    android:value="您的Android API Key"/>
</application>

iOS配置 (ios/Runner/Info.plist)：

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>AMapApiKey</key>
<string>您的iOS API Key</string>

4. 基本使用

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

class MapPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AMapWidget(
        apiKey: const AMapApiKey(
          iosKey: 'iOS API Key',
          androidKey: 'Android API Key',
        ),
        onMapCreated: (AMapController controller) {
          // 地图创建回调
        },
      ),
    );
  }
}

5. 权限配置

Android：添加网络和定位权限 iOS：在Info.plist中添加位置权限描述

注意事项

  • 确保包名与高德平台注册的一致
  • iOS需要设置NSLocationWhenInUseUsageDescription
  • 建议使用最新版本插件

这样就完成了高德地图SDK的基础集成。如需更多功能（标记、路线规划等），请参考高德Flutter插件文档。

回到顶部