Flutter地图服务插件flutter_amap_base的使用

Flutter地图服务插件flutter_amap_base的使用

高德地图Flutter插件 基于AndroidView和UiKitView

[TOC]

功能

    包括 地图、导航、查询、定位

资源

Android端引入最新资源包：

implementation 'com.amap.api:navi-3dmap:9.8.2_3dmap9.8.2'
implementation 'com.amap.api:search:9.7.0'

iOS端自动引入最新版本：

- AMapFoundation (1.8.2)
- AMapLocation (2.10.0):
    - AMapFoundation (>= 1.8.0)
- AMapNavi (9.8.0):
    - AMapFoundation (>= 1.8.2)
- AMapSearch (9.7.0):
    - AMapFoundation (>= 1.8.0)

Android项目默认集成了androidx

使用方法：

引入插件：

dependencies:
  flutter_amap_base: 
    git:
      url: http://code.tengfeiyc.com/Liyadong/amap_base.git
      path: base

导入：

import 'package:flutter_amap_base/amap_base.dart';

Android端设置key：

在AndroidManifest.xml中添加：

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

iOS端设置key：

调用以下方法初始化：

await AMap.init('您的key'); // 这个方法在Android端无效

注意：
iOS端的UiKitView目前还只是preview状态，默认不支持，需要手动打开开关。在Info.plist文件中新增一行：

<key>io.flutter.embedded_views_preview</key>
<string>true</string>

关于高德的Android SDK和iOS SDK

由于Android和iOS端的实现完全不同，Android端模仿了Google Map的API设计，而iOS端没有模仿Google Map的设计，因此需要额外的工作来兼容两个平台的功能。此库的目标是尽可能地统一双端API设置，采用取各自平台API的并集，并在文档中明确指出哪些API对哪个平台有效。

关于包的大小

已经按照高德提供的各个子包分出了四个分支（2D地图暂无支持计划）：

• feature/map分支依赖高德3D地图库。
• feature/location分支依赖高德定位库。
• feature/navi分支依赖高德导航库（Navi库已包含3D地图库，避免重复引用）。
• feature/search分支依赖高德搜索库。

关于Swift项目

Swift项目需要注释掉Podfile中的use_framework!。尝试在podspec中添加static_framework = true，但会导致找不到pod里的头文件。如果有人有更好的解决方案，请告知。

关于项目结构

项目结构按照高德官方的4个子包（不包括2D地图）组织，分为地图、定位、导航、搜索四大模块。

|-- me.yohom.amapbase
    |-- `AMapBasePlugin`: Flutter插件类
    |-- `FunctionRegistry`: 功能登记处，所有功能都需要在此处注册。
    |-- `IMapMethodHandler`: **处理委托对象**接口。
    |-- common: 通用代码
    |-- map: 地图功能模块
        |-- MapHandlers
        |-- MapModels: 数据模型
        |-- `AMapFactory`: AMapView工厂，Flutter的platform view需要
    |-- navi: 导航功能模块
        |-- NaviHandlers
        |-- NaviModels: 数据模型
    |-- search: 搜索功能模块
        |-- SearchHandlers
        |-- SearchModels: 数据模型
    |-- location: 定位功能模块
        |-- LocationHandlers
        |-- LocationModels: 数据模型

FAQ:

1. 为什么定位到非洲去了？

   • 实际上是定位到了经纬度(0, 0)的位置，位于非洲西部的几内亚湾附近，原因是Key设置错误，建议检查Key的设置。

2. 为什么Android端用Flutter运行后崩溃，但是直接用Android SDK运行成功？

   • 指定项目的编译选项Additional arguments增加--target-platform android-arm。可以通过以下路径找到设置选项：
     • 从下图打开选项对话框：
     • 在VS Code中配置方式可以参考：配置方式。

TODO LIST:

地图

• 创建地图
  • 显示地图 ✅
  • 显示定位蓝点 ✅
  • 显示室内地图 ✅
  • 切换地图图层 ✅
  • 使用离线地图 ✅
  • 显示英文地图 ✅
  • 自定义地图 ✅
• 与地图交互
  • 控件交互 ✅
  • 手势交互 ✅
  • 调用方法交互 ✅
  • 地图截屏功能 ✅
• 在地图上绘制
  • 绘制点标记 ✅
  • 绘制折线 ✅
  • 绘制面 ❌
  • 轨迹纠偏 ❌
  • 点平滑移动 ❌
  • 绘制海量点图层 ❌
• 地图计算工具
  • 坐标转换 ✅
  • 距离/面积计算 ✅
  • 距离测量 ✅

搜索

• 获取地图数据
  • 获取POI数据 ✅
  • 获取地址描述数据 ✅
  • 获取行政区划数据 ❌
  • 获取公交数据 ❌
  • 获取天气数据 ❌
  • 获取业务数据（云图功能） ❌
  • 获取交通态势信息 ❌
• 出行线路规划
  • 驾车出行路线规划 ✅
  • 步行出行路线规划 ❌
  • 公交出行路线规划 ❌
  • 骑行出行路线规划 ❌
  • 货车出行路线规划 ❌

导航

• 导航组件
  • 使用导航组件 ✅
• 出行路线规划
  • 驾车路线规划 ❌
  • 货车路线规划 ❌
  • 步行路线规划 ❌
  • 骑行路线规划 ❌
• 在地图上导航
  • 实时导航 ❌
  • 模拟导航 ❌
  • 智能巡航 ❌
  • 传入外部GPS数据 ❌
  • 导航UI定制化 ❌
• HUD导航模式
  • HUD导航 ❌
• 获取导航数据
  • 导航数据 ❌
• 语音播报
  • 语音合成 ❌

定位

• 获取位置
  • 获取定位数据 ✅
• 辅助功能
  • 地理围栏 ❌
  • 坐标转换与位置判断 ❌

完整示例Demo

以下是一个完整的Flutter项目示例，展示如何使用flutter_amap_base插件加载高德地图并在地图上添加一个简单的标注。

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_amap_base/amap_base.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  [@override](/user/override)
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  late AMapController aMapController;

  [@override](/user/override)
  void initState() {
    super.initState();
    AMap.init('您的key');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("高德地图示例"),
      ),
      body: Stack(
        children: [
          AMapWidget(
            apiKey: "您的key",
            onMapCreated: (controller) {
              aMapController = controller;
              // 初始化完成后，可添加标注
              addMarker();
            },
          ),
        ],
      ),
    );
  }

  void addMarker() async {
    final markerOptions = MarkerOptions(
      position: LatLng(39.90960, 116.39722), // 北京坐标
      title: "北京",
      snippet: "这是北京",
    );

    await aMapController.addMarker(markerOptions);
  }
}