Flutter如何接入高德地图API

我在Flutter项目中需要接入高德地图API，但是不太清楚具体怎么操作。请问有没有详细的集成步骤？需要注意哪些关键点？官方文档看起来有点复杂，希望能有更简单的实现方法。另外，在Android和iOS平台上配置有什么不同吗？求一个完整的实现示例代码。

2 回复

在Flutter中接入高德地图，需执行以下步骤：

  1. 在pubspec.yaml中添加依赖：amap_flutter_map和amap_flutter_location。
  2. 获取高德地图API Key，并在Android和iOS项目中配置。
  3. 在代码中引入包，初始化地图并设置API Key。
  4. 使用AMapWidget加载地图。

注意：需分别配置Android的AndroidManifest.xml和iOS的Info.plist。

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


在Flutter中接入高德地图API，可以通过官方提供的amap_flutter_map插件实现。以下是详细步骤：

1. 申请高德地图Key

  • 前往高德开放平台注册账号并创建应用。
  • 获取iOS Bundle ID和Android包名，申请对应的Key（iOS和Android需分别申请）。

2. 添加依赖

在pubspec.yaml中添加：

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

3. 配置平台参数

Android

  1. 在android/app/src/main/AndroidManifest.xml的<application>标签内添加：
<meta-data
  android:name="com.amap.api.v2.apikey"
  android:value="您的Android Key"/>

iOS

  1. 在ios/Runner/Info.plist中添加：
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>AMapApiKey</key>
<string>您的iOS Key</string>
  1. 在ios/Podfile末尾添加：
post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['CLANG_ALLOW_NON_MODULAR_INCLUDES_IN_FRAMEWORK_MODULES'] = 'YES'
    end
  end
end

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 Key',
          androidKey: '您的Android Key',
        ),
        onMapCreated: (AMapController controller) {},
        initialCameraPosition: CameraPosition(
          target: LatLng(39.909187, 116.397451), // 北京天安门
          zoom: 15,
        ),
      ),
    );
  }
}

注意事项

  1. 权限配置：Android需在AndroidManifest.xml中添加位置权限，iOS需在Info.plist中添加位置使用说明。
  2. 混淆规则：Android平台需在proguard-rules.pro中添加高德地图的混淆配置。
  3. 初始化：确保在Widget树顶层完成地图初始化。

完成以上步骤后，即可在Flutter应用中显示高德地图并进一步实现标注、定位等功能。

回到顶部