Flutter如何使用高德地图插件（GitHub）

在Flutter项目中集成高德地图插件时遇到问题，按照GitHub上的文档配置后依然无法正常显示地图。具体步骤：已添加依赖amap_flutter_map，配置了AndroidManifest.xml的API Key，但运行后只显示灰色网格。错误日志提示"INVALID_USER_KEY"。请问如何排查？Key已确认与包名匹配，是否需要额外设置？

2 回复

在Flutter中使用高德地图插件，步骤如下：

  1. 在pubspec.yaml中添加依赖：
    dependencies:
  amap_flutter_map: ^latest_version
  2. 获取API Key并配置Android/iOS权限。
  3. 在代码中导入并使用AMapWidget。

详细步骤参考GitHub仓库的README文档。

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


在Flutter中使用高德地图插件（如amap_flutter_map）的步骤如下：

  1. 添加依赖
    在pubspec.yaml的dependencies中添加：

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

    运行 flutter pub get。

  2. 配置平台权限

    • Android：

      1. 在 android/app/src/main/AndroidManifest.xml 中添加权限和API密钥：
      <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<application>
   <meta-data
      android:name="com.amap.api.v2.apikey"
      android:value="你的高德地图API密钥"/>
</application>
      1. 在高德开放平台申请Android版API密钥（包名需与项目一致）。

    • iOS：

      1. 在 ios/Runner/Info.plist 中添加权限描述：
      <key>NSLocationWhenInUseUsageDescription</key>
<string>需要定位权限以展示地图</string>
      1. 在高德平台申请iOS版API密钥，并在 Info.plist 中添加：
      <key>MAMapApiKey</key>
<string>你的iOS API密钥</string>

  3. 基本使用
    在Dart文件中导入并嵌入地图组件：

    import 'package:amap_flutter_map/amap_flutter_map.dart';

class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AMapWidget(
        apiKey: const AMapApiKey(
          androidKey: 'ANDROID_API_KEY',
          iosKey: 'IOS_API_KEY',
        ),
        onMapCreated: (controller) {
          // 地图创建回调
        },
      ),
    );
  }
}

  4. 注意事项

    • 确保权限已动态申请（Android需处理ACCESS_FINE_LOCATION权限）。
    • 不同平台需分别申请密钥，且包名/Bundle ID必须匹配。

通过以上步骤即可快速集成高德地图。详细参数可参考插件文档。

回到顶部