gmm_amap_flutter_map #

高德地图 Flutter 插件 - 地图组件（已适配 Flutter 3.35+ / Dart 3.9+）

本插件是基于 amap_flutter_map 的改进版本，修复了在新版本 Flutter/Dart 上的兼容性问题。

功能特性 #

• ✅ 显示高德地图
• ✅ 支持地图缩放、旋转、倾斜等手势
• ✅ 支持添加标记（Marker）、折线（Polyline）、多边形（Polygon）
• ✅ 支持定位蓝点显示
• ✅ 支持地图点击、相机移动等事件回调
• ✅ 支持 Flutter 3.35+ 和 Dart 3.9+
• ✅ 支持 Android 和 iOS 平台

安装 #

在 pubspec.yaml 中添加依赖：

dependencies:
  gmm_amap_flutter_base: ^3.1.0
  gmm_amap_flutter_map: ^3.1.0

然后运行：

flutter pub get

平台配置 #

Android 配置 #

在 android/app/src/main/AndroidManifest.xml 中添加：

<!-- 权限 -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<application>
    <!-- 高德 API Key -->
    <meta-data
        android:name="com.amap.api.v2.apikey"
        android:value="您的Android Key" />
</application>

iOS 配置 #

1. 在 ios/Runner/Info.plist 中添加定位权限描述：

<key>NSLocationWhenInUseUsageDescription</key>
<string>需要获取您的位置以在地图上显示</string>

2. 在 ios/Runner/AppDelegate.swift 中配置 API Key：

import AMapFoundationKit

// 在 application:didFinishLaunchingWithOptions: 中添加
AMapServices.shared().apiKey = "您的iOS Key"
AMapServices.shared().enableHTTPS = true

使用示例 #

基础地图 #

import 'package:flutter/material.dart';
import 'package:gmm_amap_flutter_base/gmm_amap_flutter_base.dart';
import 'package:gmm_amap_flutter_map/gmm_amap_flutter_map.dart';

class MapPage extends StatefulWidget {
  const MapPage({super.key});

  @override
  State<MapPage> createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  AMapController? _mapController;

  // 初始位置：北京天安门
  static const CameraPosition _initialPosition = CameraPosition(
    target: LatLng(39.909187, 116.397451),
    zoom: 15,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('高德地图')),
      body: AMapWidget(
        // 隐私合规配置（必须）
        privacyStatement: const AMapPrivacyStatement(
          hasContains: true,
          hasShow: true,
          hasAgree: true,
        ),
        // API Key 配置
        apiKey: const AMapApiKey(
          androidKey: '您的Android Key',
          iosKey: '您的iOS Key',
        ),
        // 初始相机位置
        initialCameraPosition: _initialPosition,
        // 地图类型
        mapType: MapType.normal,
        // 启用手势
        zoomGesturesEnabled: true,
        scrollGesturesEnabled: true,
        rotateGesturesEnabled: true,
        // 回调
        onMapCreated: (controller) {
          _mapController = controller;
          print('地图创建成功');
        },
        onTap: (latLng) {
          print('点击位置: ${latLng.latitude}, ${latLng.longitude}');
        },
      ),
    );
  }
}

显示定位蓝点 #

AMapWidget(
  // ... 其他配置
  myLocationStyleOptions: MyLocationStyleOptions(
    true, // 是否显示定位蓝点
    circleFillColor: Colors.blue.withOpacity(0.2),
    circleStrokeColor: Colors.blue,
    circleStrokeWidth: 2,
  ),
  onLocationChanged: (AMapLocation location) {
    print('定位更新: ${location.latLng.latitude}, ${location.latLng.longitude}');
  },
)

添加标记 #

final Set<Marker> markers = {
  Marker(
    position: const LatLng(39.909187, 116.397451),
    infoWindow: const InfoWindow(title: '天安门'),
    onTap: (markerId) {
      print('点击了标记: $markerId');
    },
  ),
};

AMapWidget(
  // ... 其他配置
  markers: markers,
)

移动相机 #

// 移动到指定位置
_mapController?.moveCamera(
  CameraUpdate.newCameraPosition(
    const CameraPosition(
      target: LatLng(31.230416, 121.473701), // 上海
      zoom: 15,
    ),
  ),
  animated: true,
  duration: 500,
);

// 缩放
_mapController?.moveCamera(CameraUpdate.zoomIn());
_mapController?.moveCamera(CameraUpdate.zoomOut());

相关插件 #

• gmm_amap_flutter_base - 高德地图基础库
• gmm_amap_flutter_location - 高德定位插件

许可证 #

MIT License - 详见 LICENSE 文件

致谢 #

本插件基于高德官方 amap_flutter_map 改进，感谢高德开放平台的支持。