Flutter如何引入高德地图

在Flutter项目中集成高德地图时遇到问题：按照官方文档添加依赖和配置key后，运行项目始终无法显示地图界面，控制台也没有报错信息。想请教具体实现步骤是否正确？是否需要额外配置iOS和Android的本地权限？希望有经验的朋友能分享完整的集成流程和常见避坑方法。

2 回复

Flutter引入高德地图可使用amap_flutter_map插件。步骤：

  1. 在pubspec.yaml添加依赖：amap_flutter_map: ^版本号
  2. 获取高德地图Key并配置Android/iOS权限
  3. 在代码中引入并使用AMapWidget

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


在Flutter中引入高德地图，可以使用官方提供的amap_flutter_map插件。以下是详细步骤：

1. 添加依赖

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

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

2. 获取高德地图Key

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

3. 平台配置

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>

4. 基本使用

import 'package:amap_flutter_map/amap_flutter_map.dart';

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

5. 权限配置（Android）

在AndroidManifest.xml中添加位置权限：

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

注意事项：

  1. 确保Key正确且应用包名与高德平台注册一致
  2. iOS需要配置隐私描述
  3. 首次运行建议真机测试

这样就完成了高德地图在Flutter中的基本集成。

回到顶部