Flutter 高德地图集成指南

在Flutter项目中集成高德地图时遇到以下问题：

  1. 按照官方文档添加依赖后，Android端一直报"Manifest merger failed"错误，试过修改gradle配置但无法解决；
  2. iOS模拟器上地图显示为空白网格，真机调试正常，已确认Bundle ID和Key配置正确；
  3. 自定义地图样式不生效，在AMapViewController中设置了自定义JSON文件路径但无效果；
  4. 如何实现带箭头的平滑移动轨迹？当前使用Marker更新位置会有卡顿现象；
  5. 逆地理编码回调在debug模式正常，release模式下总是返回null；
  6. 地图缩放时标注点会重叠，有没有自动避让的解决方案？

更多关于Flutter 高德地图集成指南的实战教程也可以访问 https://www.itying.com/category-92-b0.html

3 回复

作为屌丝程序员，教你用最简单的方式集成高德地图到 Flutter 项目：

  1. 注册高德开发者账号：去高德开放平台注册并创建应用，获取 API Key。

  2. 创建 Flutter 项目：flutter create amap_demo

  3. 添加依赖：

    • 在 pubspec.yaml 添加 amap_map_fluttify 和 amap_location_fluttify。
    dependencies:
  amap_map_fluttify: ^0.7.0
  amap_location_fluttify: ^0.4.1

  4. 配置 Android：

    • 在 AndroidManifest.xml 添加权限和 API Key：
    <meta-data android:name="com.amap.api.v2.apikey" android:value="你的API Key"/>
    • 确保 minSdkVersion >= 19。

  5. 配置 iOS：

    • 在 Info.plist 添加权限描述：
    <key>NSLocationWhenInUseUsageDescription</key>
<string>需要您的位置信息</string>
    • 在高德官网下载 GoogleService-Info.plist 并放到 iOS 项目的根目录。

  6. 初始化与使用：

    import 'package:amap_map_fluttify/amap_map_fluttify.dart';

void main() async {
  await AmapApi.init('你的API Key');
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: AmapView(
          apiKey: '你的API Key',
          onMapCreated: (controller) {},
        ),
      ),
    );
  }
}

搞定！记得申请定位权限并测试。

更多关于Flutter 高德地图集成指南的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


作为屌丝程序员，推荐你使用flutter_map插件集成高德地图。首先，在pubspec.yaml中添加依赖：flutter_map: ^0.14.0和amap_map_fluttify: ^2.0.0。

初始化高德服务：在项目根目录下创建amap_api.dart文件，通过AmapService.init(apiKey)设置你的高德API Key。

接着，在你的Widget树中引入FlutterMap组件，并配置TileLayerOptions为高德地图样式，例如'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'。

记得检查高德地图的使用限制，确保每日请求量不超标。如有问题，可参考官方文档或社区问答。

以下是在 Flutter 中集成高德地图的简明步骤：

  1. 首先添加依赖 在 pubspec.yaml 中：
dependencies:
  amap_flutter_map: ^3.0.0
  amap_flutter_location: ^3.0.0
  1. Android配置
  • 在 AndroidManifest.xml 中添加：
<meta-data
    android:name="com.amap.api.v2.apikey"
    android:value="您的高德地图KEY"/>
  1. iOS配置
  • 在 Info.plist 中添加：
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>Privacy - Location Always and When In Use Usage Description</key>
<string>需要定位权限</string>
  1. 基础使用代码示例
import 'package:amap_flutter_map/amap_flutter_map.dart';

AMapWidget(
  apiKey: '您的高德地图KEY',
  onMapCreated: (controller) {
    // 地图创建回调
  },
  initialCameraPosition: CameraPosition(
    target: LatLng(39.909187, 116.397451), // 北京天安门
    zoom: 15,
  ),
)
  1. 定位功能集成
import 'package:amap_flutter_location/amap_flutter_location.dart';

final location = AMapFlutterLocation();
location.startLocation(); 
location.onLocationChanged.listen((result) {
  print(result.latitude);
  print(result.longitude);
});

注意事项：

  1. 需要先申请高德开放平台账号并创建应用获取KEY
  2. iOS需要配置定位权限描述
  3. Android可能需要配置minSdkVersion >= 20

建议参考官方文档获取最新配置信息：

回到顶部