Flutter高德地图集成教程 地图显示与交互

我在Flutter项目中集成高德地图时遇到了问题，按照官方文档添加了依赖和配置，但地图始终无法显示。已经检查了AndroidManifest.xml中的API Key配置是正确的，权限也都添加了，但运行后只看到空白网格。请问可能是什么原因导致的？还有如何实现地图的点击交互功能，比如点击标记弹出信息窗口？希望有经验的开发者能分享一下具体的实现步骤和常见问题的解决方法。

3 回复

作为屌丝程序员，今天分享下如何用Flutter集成高德地图。

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

  2. 在pubspec.yaml添加依赖：

dependencies:
  amap_map_fluttify: ^最新版本号
  1. 初始化高德地图服务：
import 'package:amap_map_fluttify/amap_map_fluttify.dart';

void main() async {
  await AMapInit.instance.init('你的高德API Key');
}
  1. 创建地图页面：
class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  final _controller = AmapController();

  @override
  Widget build(BuildContext context) {
    return AmapView(
      controller: _controller,
      onMapCreated: (controller) {
        _controller.moveCamera(CameraPosition(
            target: LatLng(39.90960, 116.39722), zoom: 18));
      },
    );
  }
}
  1. 添加交互事件监听：
onMapTap: (LatLng latLng) {
  print('点击位置：$latLng');
},

这样就能实现基础的地图显示和简单交互了。记得处理好Android和iOS的权限配置哦！

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


以下为Flutter集成高德地图的基本步骤：

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

  2. 添加依赖：在pubspec.yaml中添加依赖，例如amap_map_fluttify。

dependencies:
  amap_map_fluttify: ^latest_version
  1. 初始化插件：在主文件中初始化高德SDK。
import 'package:flutter/services.dart';
import 'package:amap_map_fluttify/amap_map_fluttify.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await AmapApi.instance.init(apiKey: 'your_key');
  runApp(MyApp());
}
  1. 构建地图页面：使用FlutterMap或原生组件展示地图。
class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AmapView(
        apiKey: 'your_key',
        onMapCreated: (controller) {
          // 初始化完成后的操作
        },
      ),
    );
  }
}
  1. 实现交互功能：通过回调监听地图事件，如点击、拖动等。
onMapTap: (LatLng latLng) {
  print('点击坐标: $latLng');
},
  1. 运行调试：确保Android添加<meta-data>到AndroidManifest.xml，iOS设置Bundle ID对应高德Key。

完成以上步骤即可实现基础的地图显示与交互功能。

Flutter 高德地图集成教程 - 地图显示与交互

第一步：添加依赖

在 pubspec.yaml 中添加高德地图 Flutter 插件：

dependencies:
  amap_flutter_map: ^3.2.0
  amap_flutter_location: ^3.1.0 # 可选，如果需要定位功能

第二步：配置 Android/iOS

Android配置

  1. 在 AndroidManifest.xml 中添加权限和密钥
<application>
    <meta-data
        android:name="com.amap.api.v2.apikey"
        android:value="您的高德地图key"/>
</application>

iOS配置

在 Info.plist 中添加：

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSLocationWhenInUseUsageDescription</key>
<string>需要定位权限</string>

第三步：基本地图显示

import 'package:amap_flutter_map/amap_flutter_map.dart';
import 'package:amap_flutter_base/amap_flutter_base.dart';

class MapPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AMapWidget(
        apiKey: AMapApiKey(
          androidKey: '您的高德Android Key',
          iosKey: '您的高德iOS Key',
        ),
        onMapCreated: (AMapController controller) {
          // 地图创建完成回调
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(39.909186, 116.397411), // 北京天安门
          zoom: 15,
        ),
      ),
    );
  }
}

第四步：常用交互功能

  1. 定位到当前用户位置
AMapWidget(
  myLocationStyleOptions: MyLocationStyleOptions(true),
)
  1. 添加标记点
AMapWidget(
  markers: Set<Marker>.from([
    Marker(
      position: LatLng(39.909186, 116.397411),
      icon: BitmapDescriptor.defaultMarker,
      infoWindow: InfoWindow(title: "天安门", snippet: "北京标志性建筑"),
    ),
  ]),
)
  1. 地图移动与缩放监听
AMapWidget(
  onCameraMove: (CameraPosition position) {
    print(position.target); // 获取当前中心点坐标
  },
  onMapCreated: (controller) {
    // 地图加载完成后可以调用各种方法
    controller.moveCamera(
      CameraUpdate.newLatLngZoom(LatLng(31.230416, 121.473701), 14),
    );
  },
)

记得在高德开放平台申请对应平台的Key并配置。

回到顶部