Flutter教程高德地图的集成与使用

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

  1. 按照官方文档添加依赖后，Android端始终无法显示地图，只出现网格，iOS正常，需要排查哪些配置？
  2. 高德地图Flutter插件是否支持自定义地图样式？如何加载本地JSON样式文件？
  3. 实现地图标记点聚合功能时，Marker数量超过200个会严重卡顿，有没有性能优化方案？
  4. 如何监听地图的拖拽、缩放等手势事件？官方示例中缺少相关回调的说明。
  5. 在Release模式下定位功能失效，但Debug模式正常，可能是什么原因导致的？
3 回复
  1. 首先前往高德开放平台申请Key，选择地图SDK，创建应用后获取Android和iOS的Key。
  2. 在Flutter项目中添加依赖：amap_map_fluttur: ^2.0.0。
  3. 在pubspec.yaml中配置Android的key，在AndroidManifest.xml里加入：
    <meta-data android:name="com.amap.api.v2.apikey" android:value="你的Android Key"/>
  4. iOS需在Info.plist添加：
    <key>NSLocationWhenInUseUsageDescription</key>
<string>需要定位权限</string>
<key>AMAP_API_KEY</key>
<string>你的iOS Key</string>
  5. 编写代码展示地图：
    import 'package:flutter/material.dart';
import 'package:amap_map_fluttur/amap_map_fluttur.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapPage(),
    );
  }
}

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  @override
  Widget build(BuildContext context) {
    return AmapView(
      apiKey: "你的Key",
      onMapCreated: (controller) {},
    );
  }
}
  6. 可进一步设置定位、标记等功能。

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


首先，在pubspec.yaml中添加高德地图插件依赖，如amap_map_fluttur: ^2.0.0。接着运行flutter pub get安装依赖。

在高德开放平台申请API Key，并在AndroidManifest.xml中添加权限和API Key：

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<meta-data android:name="com.amap.api.v2.apikey" android:value="your_api_key"/>

创建一个StatefulWidget用于展示地图。初始化时设置初始经纬度和地图类型。监听定位功能时需检查权限并请求用户授权。

关键代码如下：

import 'package:flutter/material.dart';
import 'package:amap_map_fluttur/amap_map_fluttur.dart';

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  AmapController controller;

  @override
  Widget build(BuildContext context) {
    return AmapView(
      onMapCreated: (controller) {
        this.controller = controller;
      },
      initialCameraPosition: CameraPosition(target: LatLng(39.90960, 116.39722), zoom: 15),
      myLocationEnabled: true,
    );
  }
}

记得测试时使用真机，模拟器可能不支持某些功能。

Flutter高德地图集成与使用教程

集成步骤

1. 添加依赖

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

dependencies:
  amap_flutter_map: ^3.0.0
  amap_flutter_location: ^3.0.0

2. 获取高德地图Key

  1. 前往高德开放平台
  2. 创建应用，选择Android/iOS平台
  3. 获取应用的API Key

3. 配置Android

在AndroidManifest.xml中添加：

<meta-data
    android:name="com.amap.api.v2.apikey"
    android:value="您的高德Key"/>

4. 配置iOS

在Info.plist中添加：

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>Privacy - Location Always Usage Description</key>
<string>需要您的定位权限</string>
<key>Privacy - Location When In Use Usage Description</key>
<string>需要您的定位权限</string>

基本使用

1. 创建地图

import 'package:amap_flutter_map/amap_flutter_map.dart';

AmapWidget(
  apiKey: '您的高德Key',
  onMapCreated: (AMapController controller) {
    // 地图创建完成回调
  },
  initialCameraPosition: CameraPosition(
    target: LatLng(39.909187, 116.397451), // 北京中心坐标
    zoom: 15.0,
  ),
)

2. 添加标记

Marker(
  position: LatLng(39.909187, 116.397451),
  icon: BitmapDescriptor.defaultMarker,
  infoWindow: InfoWindow(
    title: '标记标题',
    snippet: '标记描述',
  ),
)

3. 获取当前位置

import 'package:amap_flutter_location/amap_flutter_location.dart';

final location = AMapFlutterLocation();
location.updatePrivacyAgree(true);
location.updatePrivacyShow(true, true);

location.onLocationChanged.listen((Map<String, Object> result) {
  print(result['latitude']);
  print(result['longitude']);
});

location.startLocation();

常用功能

  1. 地图类型切换：通过mapType属性设置标准、卫星、夜间等地图类型
  2. 手势控制：通过gestureRecognizers设置手势交互
  3. 地图控件：通过myLocationButtonEnabled等属性控制UI控件显示
  4. 路线规划：需使用高德Web API实现

注意：使用前请确保已申请相关权限，并在应用启动时处理权限请求逻辑。

回到顶部