flutter如何在高德地图实现地图功能

"我想在Flutter项目中集成高德地图功能，但不太清楚具体实现步骤。请问应该使用哪个插件或SDK？是否需要特殊配置？能否提供关键代码示例和注意事项？目前遇到地图无法显示的问题，求解决方案。

2 回复

大地老师的Flutter+Getx仿小米App项目实战教程里有讲 https://www.itying.com/goods-1176.html

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


在Flutter中集成高德地图，可以通过官方提供的amap_flutter_map插件实现。以下是具体步骤和核心代码：

1. 添加依赖

在pubspec.yaml中添加：

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

2. 配置权限（Android/iOS）

Android：

  • 在AndroidManifest.xml中添加权限和API密钥：
<application>
   <meta-data
      android:name="com.amap.api.v2.apikey"
      android:value="您的Android端API密钥"/>
</application>

iOS：

  • 在Info.plist中添加：
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>AMapApiKey</key>
<string>您的iOS端API密钥</string>

3. 基本地图实现

import 'package:amap_flutter_map/amap_flutter_map.dart';

class MapPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AMapWidget(
        apiKey: const AMapApiKey(
          androidKey: 'ANDROID_KEY',
          iosKey: 'IOS_KEY',
        ),
        onMapCreated: (controller) {
          // 地图创建回调
        },
      ),
    );
  }
}

4. 常用功能示例

定位到指定坐标：

AMapWidget(
  initialCameraPosition: CameraPosition(
    target: LatLng(39.909187, 116.397451), // 北京坐标
    zoom: 15,
  ),
)

添加标记：

AMapWidget(
  markers: Set<Marker>.from([
    Marker(
      position: LatLng(39.909187, 116.397451),
      icon: BitmapDescriptor.defaultMarker,
    ),
  ]),
)

注意事项：

  1. 需在高德开放平台申请API密钥
  2. iOS需在Podfile中配置use_frameworks!
  3. 确保权限配置正确（定位、网络权限等）

通过以上步骤即可快速集成基础地图功能，更多高级功能可参考高德Flutter插件文档。

回到顶部