flutter如何调用高德地图

在Flutter项目中如何集成并调用高德地图API？需要实现基础的地图展示、定位和标记功能，但官方插件文档不够详细。具体疑问：

  1. Android/iOS端分别需要配置哪些密钥和权限？
  2. 如何通过flutter_amap或其他第三方插件加载地图？
  3. 添加自定义标记点时，如何解决图标不显示或位置偏移的问题？
  4. 是否有完整的示例代码可以参考？求大佬分享经验！
2 回复

Flutter调用高德地图可使用amap_flutter_map插件。在pubspec.yaml添加依赖，配置Android和iOS的API密钥及权限，即可在代码中加载地图。

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


在Flutter中调用高德地图，可以通过官方提供的amap_flutter_map插件实现。以下是具体步骤和示例代码：

1. 添加依赖

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

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

2. 配置权限（Android/iOS）

Android：

  • 在AndroidManifest.xml中添加权限和API密钥：
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<application>
   <meta-data
     android:name="com.amap.api.v2.apikey"
     android:value="您的Android端高德地图API密钥"/>
</application>

iOS：

  • 在Info.plist中添加权限描述和API密钥：
<key>NSLocationWhenInUseUsageDescription</key>
<string>需要定位权限以展示地图</string>
<key>AMapApiKey</key>
<string>您的iOS端高德地图API密钥</string>

3. 基本使用示例

import 'package:amap_flutter_map/amap_flutter_map.dart';
import 'package:flutter/material.dart';

class MapPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AMapWidget(
        apiKey: const AMapApiKey(
          // 配置密钥（Android/iOS可分开设置）
          androidKey: 'ANDROID_API_KEY',
          iosKey: 'IOS_API_KEY',
        ),
        onMapCreated: (controller) {
          // 地图创建回调
        },
        // 初始相机位置（北京）
        initialCameraPosition: const CameraPosition(
          target: LatLng(39.909187, 116.397451),
          zoom: 15,
        ),
      ),
    );
  }
}

4. 主要功能

  • 添加标记：使用Markers集合
  • 定位控制：通过AMapController调用showMyLocation()
  • 手势交互：缩放、拖动、旋转等默认支持

注意事项：

  1. 需在高德开放平台申请对应平台的API密钥
  2. 按需配置定位权限（获取用户位置时需动态申请）
  3. 建议参考官方文档获取最新配置说明

以上即可在Flutter中快速集成高德地图基础功能。

回到顶部