Flutter教程高德地图集成

在Flutter中集成高德地图时遇到以下问题：按照官方文档添加了依赖和配置，但地图始终无法显示，控制台也没有报错信息。具体操作步骤是：

  1. 在pubspec.yaml添加了amap_flutter_map和amap_flutter_location插件最新版本；
  2. 在AndroidManifest.xml配置了API_KEY；
  3. 使用AMapWidget初始化地图。请问可能是什么原因导致地图不显示？是否需要额外检查网络权限或其他隐藏配置？iOS和Android平台的集成方式是否有差异？
3 回复

首先在高德开放平台注册账号并创建应用，获取API Key。接着在Flutter项目中添加依赖flutter_map和amap_map_fluttify。

  1. 在pubspec.yaml里配置：
dependencies:
  flutter_map: ^3.0.0
  amap_map_fluttify: ^0.0.17

运行flutter pub get安装。

  1. 创建高德地图服务实例，在main函数初始化：
import 'package:amap_map_fluttify/amap_map_fluttify.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await AmapApi.init(apiKey: '你的高德API Key');
  runApp(MyApp());
}
  1. 使用Flutter Map Widget展示地图：
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('高德地图示例')),
        body: FlutterMap(
          options: MapOptions(
            center: LatLng(39.90960, 116.39722), 
            zoom: 10.0,
          ),
          layers: [
            TileLayerOptions(
              urlTemplate: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
              apiKey: '你的高德API Key',
            ),
          ],
        ),
      ),
    );
  }
}
  1. 根据需求调整样式、标注等高级功能。

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


作为一个屌丝程序员，来教你如何在Flutter中集成高德地图。首先，你需要去高德开放平台申请Key（API Key）。接着，在Flutter项目中添加依赖，打开pubspec.yaml文件，添加amap_map_fluttify。然后执行flutter pub get更新依赖。

接下来创建一个StatefulWidget，在build方法里返回一个AndroidView或UiKitView（根据平台不同），设置其初始化参数为高德的地图配置。记得处理生命周期回调，比如当页面销毁时释放资源。

最后一步是使用获取到的高德Key进行初始化，调用相关API设置地图显示区域、添加标记等操作。例如，你可以通过MapController来控制地图视角和交互。记得测试各种场景，确保定位、缩放等功能正常运行。这样你就成功集成了高德地图到你的Flutter应用中了！

Flutter 集成高德地图教程

1. 添加依赖

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

dependencies:
  amap_flutter_map: ^2.0.1
  amap_flutter_location: ^2.0.1

2. 获取高德地图Key

  1. 前往高德开放平台注册开发者账号
  2. 创建应用，获取 iOS 和 Android 的 API Key

3. 平台配置

Android 配置

  1. 在 AndroidManifest.xml 中添加：
<meta-data
    android:name="com.amap.api.v2.apikey"
    android:value="你的Android API Key"/>
  1. 在 android/app/build.gradle 的 defaultConfig 中添加：
ndk {
    abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86_64'
}

iOS 配置

  1. 在 Info.plist 中添加：
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>AMapApiKey</key>
<string>你的iOS API Key</string>

4. 基本使用代码

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(
          iosKey: '你的iOS Key',
          androidKey: '你的Android Key',
        ),
        onMapCreated: (controller) {
          // 地图创建完成回调
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(39.90960, 116.397228), // 北京中心坐标
          zoom: 15, // 缩放级别
        ),
      ),
    );
  }
}

5. 常用功能

添加标记

AMapWidget(
  markers: Set<Marker>.of([
    Marker(
      position: LatLng(39.90960, 116.397228),
      title: '标记标题',
      snippet: '标记描述',
    ),
  ]),
)

定位功能

AMapFlutterLocation().updatePrivacyAgree(true);
AMapFlutterLocation().updatePrivacyShow(true);

需要获取定位权限，可以使用 permission_handler 插件。

以上是 Flutter 集成高德地图的基本步骤，你可以根据需要扩展更多功能。

回到顶部