flutter如何集成高德地图

在Flutter项目中如何集成高德地图？需要引入哪些依赖？Android和iOS端分别需要配置哪些权限和Key？有没有详细的步骤教程或者官方推荐的插件？集成过程中常见问题有哪些需要注意？

2 回复

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

  1. 添加依赖
    在 pubspec.yaml 中添加：

    dependencies:
  amap_flutter_map: ^3.0.0

  2. 配置权限（Android/iOS）

    • Android：在 AndroidManifest.xml 添加网络权限和高德Key
    • iOS：在 Info.plist 添加定位描述和高德Key

  3. 初始化地图

    import 'package:amap_flutter_map/amap_flutter_map.dart';

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

  4. 注意事项

    • 需在高德开放平台申请App Key
    • iOS需在 podfile 添加 use_frameworks!
    • 注意处理动态权限申请（定位等）

详细步骤建议参考高德官方Flutter插件文档，避免踩坑。

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


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

1. 添加依赖

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

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

运行 flutter pub get 安装插件。

2. 配置平台参数

Android 配置

  1. 在 android/app/src/main/AndroidManifest.xml 中添加权限和密钥：
<application>
   <meta-data
       android:name="com.amap.api.v2.apikey"
       android:value="您的Android端高德地图Key"/>
</application>
  1. 在 android/app/build.gradle 中设置 minSdkVersion ≥ 20。

iOS 配置

  1. 在 ios/Runner/Info.plist 中添加：
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>AMapApiKey</key>
<string>您的iOS端高德地图Key</string>
  1. 在 ios/Podfile 第一行添加：
platform :ios, '9.0'

3. 获取高德地图Key

  1. 前往 高德开放平台 创建应用
  2. 为 Android 和 iOS 分别申请 Key
  3. 绑定 Bundle ID（iOS）和包名（Android）

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) {
          // 地图创建回调
        },
        initialCameraPosition: const CameraPosition(
          target: LatLng(39.909187, 116.397451), // 北京天安门
          zoom: 15,
        ),
      ),
    );
  }
}

5. 主要功能

  • 地图显示：支持多种地图类型
  • 标记点：使用 Marker 添加标记
  • 定位：结合 amap_flutter_location 插件实现
  • 轨迹绘制：通过 Polyline 实现

注意事项

  1. 确保 Key 配置正确且平台匹配
  2. iOS 需要配置隐私权限描述
  3. 真机测试时确保网络连接正常

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

回到顶部