高德地图flutter如何集成使用

在高德地图Flutter插件集成过程中，如何正确配置AndroidManifest.xml和iOS的Info.plist文件？具体需要添加哪些密钥和权限？初始化地图时出现黑屏或key验证失败该如何排查？能否提供完整的Flutter项目集成示例代码？

2 回复

集成高德地图Flutter插件：

  1. 在pubspec.yaml添加依赖：amap_flutter_map: ^x.x.x。
  2. 获取高德地图API Key，在Android/iOS配置中设置。
  3. 引入插件，在代码中使用AMapWidget加载地图。
  4. 按需添加定位、标记等功能。

更多关于高德地图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 端配置

  1. 在 AndroidManifest.xml 中添加权限和密钥：
<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="您的Android平台Key" />
</application>
  1. 在 MainActivity.kt 中初始化：
import com.amap.api.maps.MapsInitializer
class MainActivity : FlutterActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    MapsInitializer.updatePrivacyShow(this, true, true)
    MapsInitializer.updatePrivacyAgree(this, true)
  }
}

iOS 端配置

  1. 在 Info.plist 中添加权限描述：
<key>NSLocationWhenInUseUsageDescription</key>
<string>需要定位权限以展示地图</string>
  1. 在 AppDelegate.swift 中初始化：
import AMapFoundationKit
func application(
  _ application: UIApplication,
  didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
  AMapServices.shared().apiKey = "您的iOS平台Key"
  AMapServices.shared().enableHTTPS = true
  GeneratedPluginRegistrant.register(with: self)
  return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}

3. Flutter 中使用地图

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) {
          // 地图创建回调
        },
        initialCameraPosition: const CameraPosition(
          target: LatLng(39.909187, 116.397451), // 北京天安门
          zoom: 15,
        ),
      ),
    );
  }
}

4. 主要功能

  • 定位：结合 amap_flutter_location 插件实现
  • 标记：使用 Marker 类添加标记点
  • 轨迹绘制：通过 Polyline 实现
  • 交互事件：支持点击、长按等手势监听

注意事项

  1. 需要分别在高德开放平台申请 Android 和 iOS 的 Key
  2. 确保权限配置正确（定位、网络权限）
  3. iOS 需在 Podfile 中指定地图版本：
post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == 'AMapFoundation'
      target.build_configurations.each do |config|
        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0'
      end
    end
  end
end

完成以上步骤后即可正常使用高德地图功能。建议参考高德官方Flutter插件文档获取最新配置信息。

回到顶部