flutter如何使用amap_flutter_map插件

在Flutter项目中集成amap_flutter_map插件时遇到问题，按照官方文档配置后地图仍然无法显示。具体步骤包括：

  1. 已添加依赖并执行flutter pub get
  2. 在AndroidManifest.xml中配置了高德地图的API Key
  3. 初始化时调用了AMapFlutterMap.setApiKey()
    但运行后只显示灰色网格，没有地图内容。控制台无报错信息，请问可能是什么原因？是否需要检查其他配置项？
2 回复

使用amap_flutter_map插件步骤：

  1. 添加依赖：在pubspec.yaml中添加
dependencies:
  amap_flutter_map: ^2.0.0
  1. 配置权限：
  • Android：在AndroidManifest.xml添加网络权限和高德Key
  • iOS：在Info.plist添加定位权限描述
  1. 获取高德Key：
  • 注册高德开发者账号
  • 创建应用并获取Key
  1. 基本使用：
import 'package:amap_flutter_map/amap_flutter_map.dart';

AMapWidget(
  apiKey: '你的高德Key',
  onMapCreated: (controller) {
    // 地图创建回调
  },
)
  1. 常用功能：
  • 添加标记：Marker
  • 绘制图形：Polyline、Polygon
  • 定位：AMapLocation
  • 地图交互：缩放、旋转

注意：iOS需要额外配置白名单，Android需要配置签名。

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


使用 amap_flutter_map 插件在 Flutter 中集成高德地图，步骤如下：

1. 添加依赖

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

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

运行 flutter pub get 安装。

2. 配置平台权限

  • Android：

    • 在 AndroidManifest.xml 中添加权限和 API Key：
      <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<application>
  <meta-data
    android:name="com.amap.api.v2.apikey"
    android:value="你的高德地图API Key"/>
</application>
    • 在 MainActivity.kt 中初始化：
      import com.amap.api.maps.MapsInitializer
class MainActivity: FlutterActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    MapsInitializer.updatePrivacyShow(this, true, true)
    MapsInitializer.updatePrivacyAgree(this, true)
  }
}

  • iOS：

    • 在 Info.plist 中添加权限和 Key：
      <key>NSLocationWhenInUseUsageDescription</key>
<string>需要定位权限</string>
<key>AMapApiKey</key>
<string>你的高德地图API Key</string>
    • 在 AppDelegate.swift 中初始化：
      import AMapFoundationKit
override func application(
  _ application: UIApplication,
  didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
  AMapServices.shared().enableHTTPS = true
  AMapServices.shared().apiKey = "你的API Key"
  GeneratedPluginRegistrant.register(with: self)
  return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}

3. 在 Flutter 中使用

import 'package:amap_flutter_map/amap_flutter_map.dart';
import 'package:amap_flutter_base/amap_flutter_base.dart';

class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AMapWidget(
        apiKey: '你的API Key',
        initialCameraPosition: CameraPosition(
          target: LatLng(39.90960, 116.397228), // 北京坐标
          zoom: 15,
        ),
        onMapCreated: (AMapController controller) {
          // 地图创建完成
        },
      ),
    );
  }
}

4. 注意事项

  • 在高德开放平台申请 API Key，并绑定应用包名。
  • 根据需要添加其他功能（如标记、交互事件）。

完成以上步骤即可在 Flutter 应用中显示高德地图。

回到顶部