flutter如何集成amap地图插件

在Flutter项目中集成amap地图插件时遇到了问题，按照官方文档操作后还是无法正常显示地图。有没有详细且可靠的集成步骤？或者有没有常见错误的解决方案？

2 回复

在Flutter中集成高德地图，需先安装amap_flutter_map插件。在pubspec.yaml中添加依赖，配置Android和iOS的API密钥及权限。最后在代码中引入并使用AMapWidget即可显示地图。

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


在Flutter中集成高德地图（AMap）可以通过第三方插件 amap_flutter_map 实现。以下是详细步骤：

1. 添加依赖

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

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

运行 flutter pub get 安装。

2. 配置平台参数

Android 配置：

  • 在 AndroidManifest.xml 的 <application> 标签内添加高德地图 Key：
<meta-data
  android:name="com.amap.api.v2.apikey"
  android:value="你的高德地图Key"/>
  • 确保 android:minSdkVersion ≥ 20。

iOS 配置：

  • 在 Info.plist 中添加：
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>AMapApiKey</key>
<string>你的高德地图Key</string>
  • 在 Podfile 中追加：
post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64'
    end
  end
end

3. 基本使用

在Dart文件中导入并嵌入地图：

import 'package:amap_flutter_map/amap_flutter_map.dart';

Widget buildMap() {
  return AMapWidget(
    apiKey: '你的高德地图Key', // 如果已在原生配置可省略
    onMapCreated: (controller) {
      // 地图创建回调
    },
  );
}

4. 获取高德地图Key

  1. 前往高德开放平台注册账号。
  2. 创建应用，选择「Android平台」或「iOS平台」。
  3. 获取Key并配置到项目中。

注意事项

  • 确保网络权限已开启（Android 需 <uses-permission android:name="android.permission.INTERNET" />）。
  • iOS 模拟器需排除arm64架构（如上配置）。
  • 详细参数（如初始位置、缩放级别）可通过 AMapOptions 设置。

完成以上步骤即可在Flutter应用中显示高德地图。如需更多功能（如标记、交互），请参考官方插件文档。

回到顶部