Flutter如何集成高德地图

在Flutter项目中集成高德地图时遇到困难，官方文档提到的amap_flutter_map插件配置后无法正常显示地图。已按照文档添加AndroidManifest.xml的API Key和权限，但运行后只显示灰色网格。请问：

  1. 是否需要额外配置iOS/Android原生端？
  2. 插件版本0.3.0+是否必须搭配特定Flutter版本？
  3. 常见排查步骤有哪些？（网络权限、Key校验等已确认）
    附错误日志：PlatformException(INVALID_API_KEY, ...)
2 回复

Flutter集成高德地图步骤如下：

  1. 在pubspec.yaml添加依赖：amap_flutter_map。
  2. 获取高德地图API Key，在AndroidManifest.xml和Info.plist中配置。
  3. 使用AMapWidget加载地图。

示例代码：

AMapWidget(
  apiKey: '你的API Key',
  onMapCreated: (controller) {
    // 地图创建回调
  },
)

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


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

1. 添加依赖

在pubspec.yaml文件中添加：

dependencies:
  amap_flutter_map: ^x.x.x # 使用官方最新版本

2. 配置权限（Android）

  • 在android/app/src/main/AndroidManifest.xml中添加权限：
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

3. 获取高德Key

  1. 前往高德开放平台注册账号
  2. 创建应用，获取Android/iOS平台的Key
  3. 配置Key：

Android： 在android/app/src/main/AndroidManifest.xml的<application>标签内添加：

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

iOS： 在ios/Runner/Info.plist中添加：

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>AMapApiKey</key>
<string>您的iOS 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(
          androidKey: 'ANDROID_KEY',
          iosKey: 'IOS_KEY',
        ),
        onMapCreated: (controller) {
          // 地图创建回调
        },
      ),
    );
  }
}

5. 主要功能

  • 显示地图：使用AMapWidget
  • 添加标记：通过Markers属性
  • 定位功能：结合amap_flutter_location插件
  • 绘制路线：使用Polylines属性

注意事项：

  1. 确保正确配置平台Key
  2. iOS需要额外配置定位权限描述
  3. 建议在真机上测试定位功能

完成以上步骤后即可在Flutter应用中正常使用高德地图。如需更多高级功能，请参考官方文档。

回到顶部