Flutter 3如何集成高德地图

在Flutter 3中集成高德地图时遇到了一些问题，具体步骤如下：

  1. 按照官方文档添加了amap_flutter_map依赖，但运行后提示插件不兼容。
  2. 配置了Android和iOS的Key，但地图无法显示，只出现空白网格。
  3. 尝试了不同的版本组合，依然无法解决。

请问有没有在Flutter 3成功集成高德地图的完整教程或解决方案？是否需要额外配置？谢谢！

2 回复

在Flutter 3中集成高德地图，推荐使用官方amap_flutter_map插件：

步骤：

  1. 在pubspec.yaml添加依赖：
dependencies:
  amap_flutter_map: ^x.x.x
  1. 获取高德Key：
  • 注册高德开发者账号
  • 创建应用并获取iOS/Android平台的Key
  1. 平台配置： 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>
  1. 基础使用：
import 'package:amap_flutter_map/amap_flutter_map.dart';

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

注意：

  • iOS需在Podfile添加use_frameworks!
  • 需要配置位置权限
  • 可结合amap_flutter_location实现定位功能

建议查看插件文档获取最新配置说明。

更多关于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. 获取高德地图 Key

  • 前往高德开放平台注册账号并创建应用
  • 获取 iOS/Android 平台的 Key（需绑定 Bundle ID/Package Name）

3. 平台配置

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

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

iOS (ios/Runner/Info.plist)：

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

4. 基本使用代码

import 'package:amap_flutter_map/amap_flutter_map.dart';

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

5. 权限配置（Android）

在 android/app/src/main/AndroidManifest.xml 中添加：

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

注意事项：

  1. iOS 需要额外在 Podfile 中指定地图版本：
post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == 'AMapFoundation'
      target.build_configurations.each do |config|
        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0'
      end
    end
  end
end
  1. 运行前执行：
flutter pub get
flutter run

这样就完成了高德地图的基础集成。插件支持标记点、轨迹绘制、交互事件等完整功能，具体可参考插件文档。

回到顶部