Flutter中如何使用高德地图_map插件

在Flutter项目中集成高德地图_map插件时遇到困难，具体操作步骤如下是否有人能详细说明？包括：

  1. 如何正确添加插件依赖到pubspec.yaml
  2. 是否需要额外配置AndroidManifest.xml和Info.plist的API密钥
  3. 如何解决初始化地图时可能出现的黑屏或定位权限问题
  4. 是否有完整示例代码展示地图加载与标记功能？
    当前按照官方文档操作仍无法正常显示地图，求指教！
2 回复

在Flutter中使用高德地图插件，首先在pubspec.yaml中添加依赖：

dependencies:
  amap_flutter_map: ^latest_version

然后运行flutter pub get。在代码中导入包并配置Android/iOS的key即可使用。

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


在Flutter中使用高德地图_map插件，主要步骤如下：

  1. 添加依赖
    在 pubspec.yaml 文件中添加依赖：

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

    执行 flutter pub get 安装。

  2. 配置权限和Key

    • Android：
      在 AndroidManifest.xml 中添加权限和Key：
      <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<application>
   <meta-data
      android:name="com.amap.api.v2.apikey"
      android:value="您的Android平台Key" />
</application>
    • iOS：
      在 Info.plist 中添加权限描述和Key：
      <key>NSLocationWhenInUseUsageDescription</key>
<string>需要定位权限以展示地图</string>
<key>AMapApiKey</key>
<string>您的iOS平台Key</string>

  3. 基本使用
    在Dart文件中引入并创建地图：

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

  4. 注意事项

    • 确保高德开放平台申请Key时包名和SHA1正确。
    • iOS需在 Podfile 中指定平台版本：platform :ios, '9.0'。
    • 动态权限处理需配合 permission_handler 插件。

通过以上步骤即可快速集成高德地图，支持缩放、标记、交互等基础功能。

回到顶部