flutter中如何使用amap_flutter_map插件

我在Flutter项目中想集成高德地图，使用了amap_flutter_map插件，但遇到了一些问题：

  1. 按照文档配置了AndroidManifest.xml和iOS的Info.plist，但地图还是显示空白
  2. 如何添加自定义地图标记和交互事件？
  3. 在地图上绘制折线时，坐标转换有没有简便方法？
  4. 插件和最新Flutter版本兼容性如何？ 有没有完整的使用示例或常见问题解决方案？
2 回复

在pubspec.yaml中添加依赖：

dependencies:
  amap_flutter_map: ^版本号

然后执行flutter pub get，在代码中导入并使用：

import 'package:amap_flutter_map/amap_flutter_map.dart';

AMapWidget(
  apiKey: '你的高德地图Key',
  // 其他配置参数
)

需先申请高德地图Key并配置Android/iOS权限。

更多关于flutter中如何使用amap_flutter_map插件的实战系列教程也可以访问 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_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<application>
  <meta-data
    android:name="com.amap.api.v2.apikey"
    android:value="您的高德地图API密钥" />
</application>

iOS：

  • 在 Info.plist 中添加：
<key>NSLocationWhenInUseUsageDescription</key>
<string>需要定位权限以展示地图</string>
  • 在 AppDelegate.swift 中配置API密钥（需先注册高德开发者账号获取密钥）。

3. 基本使用

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_API_KEY',
          iosKey: 'IOS_API_KEY',
        ),
        onMapCreated: (AMapController controller) {},
        initialCameraPosition: const CameraPosition(
          target: LatLng(39.909187, 116.397451), // 北京坐标
          zoom: 15,
        ),
      ),
    );
  }
}

4. 常用功能

  • 添加标记：使用 Markers 属性
  • 绘制路线：通过 Polylines 实现
  • 定位按钮：结合 amap_flutter_location 插件实现实时定位

注意事项

  • 确保高德地图API密钥正确配置
  • iOS需在 Podfile 中指定平台版本：platform :ios, '9.0'
  • 真机测试时确认权限已授权

通过以上步骤即可快速集成高德地图基础功能。如需高级功能可参考官方文档。

回到顶部