高德地图flutter版本如何使用

如何在Flutter项目中集成高德地图SDK？具体需要配置哪些Android和iOS的权限及密钥？有没有完整的初始化流程示例？官方文档提到的Flutter插件实际使用中存在哪些常见坑？比如定位不准、地图渲染异常等问题该如何解决？能否分享一个实际可运行的地图标记和路线规划Demo代码？

2 回复

高德地图Flutter插件为amap_flutter_map。需在pubspec.yaml添加依赖，申请API Key并配置Android/iOS权限。初始化地图组件并设置key即可显示地图。

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


高德地图在Flutter中可通过官方SDK集成，以下是核心步骤和代码示例：

  1. 添加依赖 在 pubspec.yaml 中添加：
dependencies:
  amap_flutter_map: ^x.x.x # 检查pub.dev获取最新版本
  1. 配置权限（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 Key"/>
</application>
  • iOS：
    • 在 Info.plist 中添加定位权限描述和API密钥：
    <key>NSLocationWhenInUseUsageDescription</key>
<string>需要定位权限以展示地图</string>
<key>AMapApiKey</key>
<string>您的iOS端API Key</string>
  1. 基础地图实现
import 'package:amap_flutter_map/amap_flutter_map.dart';

class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AMapWidget(
        apiKey: const AMapApiKey(
          androidKey: 'ANDROID_KEY',
          iosKey: 'IOS_KEY'
        ),
        onMapCreated: (controller) {
          // 地图创建回调
        },
      ),
    );
  }
}
  1. 常用功能示例
  • 定位按钮：
floatingActionButton: FloatingActionButton(
  onPressed: () => _mapController?.showMyLocation(true),
  child: Icon(Icons.my_location),
)
  • 添加标记：
AMapWidget(
  markers: Set<Marker>.from([
    Marker(
      position: LatLng(39.90960, 116.397228),
      icon: BitmapDescriptor.defaultMarker,
    ),
  ]),
)

注意事项：

  1. 需在高德开放平台申请对应平台的API Key
  2. iOS需要额外配置UIViewController（通过官方插件自动处理）
  3. 建议使用permission_handler包动态申请定位权限

完整文档参考：高德开放平台Flutter插件文档

回到顶部