Flutter如何使用amap_map插件

我在Flutter项目中集成了amap_map插件，但在使用时遇到几个问题：

  1. 按照文档配置了API Key，但地图无法显示，只出现空白网格
  2. 如何添加自定义标记点并设置点击事件？
  3. 地图缩放级别调整后总是自动复位，该怎么固定缩放级别？
  4. 在iOS和Android上地图加载表现不一致，iOS正常但Android黑屏
    有没有完整的配置示例或常见问题解决方案？
2 回复

在Flutter中使用amap_map插件，首先在pubspec.yaml中添加依赖，然后配置Android和iOS的API密钥。在代码中导入包并初始化地图，使用AMapWidget显示地图。

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


在Flutter中使用amap_map插件集成高德地图，可按以下步骤操作：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  amap_map_fluttify: ^x.x.x # 使用最新版本

运行 flutter pub get 安装。

2. 配置平台参数

Android

  • 在 AndroidManifest.xml 的 <application> 标签内添加：
<meta-data
  android:name="com.amap.api.v2.apikey"
  android:value="你的高德地图Android Key"/>
  • 需要在 main() 中初始化：
import 'package:amap_map_fluttify/amap_map_fluttify.dart';

void main() {
  AmapService.init(iosKey: 'iOS Key', androidKey: 'Android Key');
  runApp(MyApp());
}

iOS

  • 在 Info.plist 中添加：
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>AMapApiKey</key>
<string>你的高德地图iOS Key</string>
  • 需在 podfile 中指定平台：platform :ios, '9.0'

3. 基本使用示例

import 'package:amap_map_fluttify/amap_map_fluttify.dart';

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AmapView(
        onMapCreated: (controller) async {
          // 地图创建回调
          await controller.showMyLocation(MyLocationOption(show: true));
        },
      ),
    );
  }
}

4. 常用功能

  • 定位：调用 controller.showMyLocation()
  • 添加标记：使用 controller.addMarker()
  • 移动视角：使用 controller.moveCamera()

注意事项

  1. 需申请高德地图Key（分Android和iOS）
  2. Android需配置定位权限
  3. iOS需在 Info.plist 中添加位置使用描述

建议查看官方文档获取最新配置说明和完整API。

回到顶部