Flutter高德地图集成插件xbr_gaode_amap的使用

介绍，高德系列：

基础包

高德地图合包：xbr_gaode_map，包含地图+检索+定位
高德导航合包：xbr_gaode_navi_map，包含地图+检索+定位+内置导航
码云地址：https://gitee.com/mywentop/xbr_gaode_navi_amap

演示：

主要功能

1. 增加地图查询插件，查询功能如下

   • 关键字检索 POI
   • POI详情
   • 线路规划
   • 货车线路规划（先去高德客服申请）
   • 查询输入提示 InputTips
   • 地理编码（地址转坐标）
   • 逆地理编码（坐标转地址）

2. 定位功能

   • 原生部分完全使用官方提供的SDK：amap_flutter_location；未额外增加任何功能，可以使用官方SDK所有方法
   • 处理了定位返回数据：iOS和Android兼容（官方SDK只返回Map,而且iOS和Android返回的字段不一致）
   • 简化了定位回调，使用：XbrGaodeLocation.startLocation(callback:...)

3. 地图功能在官方SDK（amap_flutter_map）做了以下调整

   • 原生部分完全使用官方提供的SDK：amap_flutter_map；未额外增加任何功能，但修复了一些BUG
   • 简化地图绘制流程，增加地图UI绘制器：AMapUIController()
   • 增加了利用多边形绘制圆的方法
   • 修复Marker不能平铺在地图上，使用 FMarker 增加了flat字段，为true时可以平铺在地图上
   • 协调了地图查询功能和地图的整合，可以一键绘制路线

安装教程

xbr_gaode_amap: ^6.0.0

使用说明

1. xbr_gaode_amap已经集成了xbr_gaode_search和xbr_gaode_location，导入如下：

import 'package:xbr_gaode_search/xbr_gaode_search.dart';

1. xbr_gaode_location在官方SDK上重新封装过，如需使用，可单独引入：
   • 定位权限配置，使用第三方permission_handler动态权限工具，使用方法请参考permission_handler文档。
   • xbr_gaode_location使用

// 开始单次定位，定位成功自动销毁
XbrGaodeLocation.instance().execOnceLocation(callback: (LocationInfo? location) {
    // location 对iOS和Android数据已兼容处理
});

// 开启连续定位
XbrGaodeLocation.instance().startTimeLocation(callback: (LocationInfo? location) {
    // location 对iOS和Android数据已兼容处理
});

[@override](/user/override)
void dispose() {
    mapController?.dispose();
    uiController.dispose();
    // 销毁连续定位
    XbrGaodeLocation.instance().destroyTimeLocation();
    super.dispose();
}

1. 地图使用:

AMapUIController uiController = AMapUIController();

// 简单使用，默认了地图部分功能，快速使用
XbrAmapWidget(
  initCameraPosition: CameraPosition(target: LatLng(26.653841, 106.642904), bearing: 45, zoom: 12, tilt: 15),
  uiController: uiController,
  onMapCreated: (AMapController controller) {
    // 地图加载完成
  },
  onCameraMove: (CameraPosition position) {
    // 地图移动
  },
  onCameraMoveEnd: (CameraPosition position) {
    // 地图移动结束
  },
)

// 或者使用需要满足地图所有功能时使用，绘制需要自己控制和刷新，uiController无法使用
AMapWidget(
  privacyStatement: XbrGaodeAmap.instace().statement,
  apiKey: XbrGaodeAmap.instace().apikey,
  mapType: widget.mapType ?? MapType.normal,
  markers: Set.of(markers.values),
  polylines: Set.of(polylines.values),
  polygons: Set.of(polygons.values),
  initialCameraPosition: widget.initCameraPosition,
  gestureScaleByMapCenter: widget.gestureScaleByMapCenter,
  onCameraMove: widget.onCameraMove,
  onCameraMoveEnd: widget.onCameraMoveEnd,
  onMapCreated: widget.onMapCreated,
  scaleEnabled: false,
)

// 线路规划
AmapSearchUtil.routePlanning(
  // 最多支持18个点，第一个为起点，最后一个为终点，中间为途径点
  wayPoints: list,
  callBack: (code, linePoints, bounds) {
    // code 1000为成功
    // linePoints 返回的线点集合，如果需要导航数据，使用方法：XbrAmapSearch.routeSearch() 返回全部数据
    // bounds 计算了一个包含线路所有点位的矩形坐标盒（最大可视面积），移动相机时可以直接使用，如下所示

    // 绘制规划线 pathlineId 是唯一值 需自定义
    // customTexture：线路Texture图片，可以不设置，使用颜色
    uiController.savePolyline("pathlineId", Polyline(
      customTexture: lineImgPath != null ? BitmapDescriptor.fromIconPath(lineImgPath) : null,
      joinType: JoinType.round,
      capType: CapType.round,
      points: linePoints,
      color: lineColor ?? Colors.blueAccent,
      width: 14,
    ));
    // 利用MAP控制器移动相机到线路最大可视面积，边距50，时间1000毫秒，可自行更改
    mapController.moveCamera(CameraUpdate.newLatLngBounds(bounds, 50), duration: 1000);
    ...
    
    /// 绘制完要刷新地图
    uiController.refeashUI();
  }
)

// 地图绘制
// 1. 绘制线
uiController.savePolyline("pathlineId", Polyline(..));
// 2. 绘制marker (flat:可将图片贴在地图上，随3d地图旋转)
uiController.saveMarker("markerId", FlatMarker(flat:...));
// 3. 绘制圆
// 获取圆数据：latLng中心点，radius圆的半径（真实半径:单位-米(m)，可以制作电子围栏）
var points = AmapUtil.getCirclePoints(center: latLng, radiusMi: radius);
// 利用绘制多边形绘制圆
uiController.savePolygon("polygonId", Polygon(points: points, ...));

/// 绘制完要刷新地图
uiController.refeashUI();

示例代码

import 'package:flutter/material.dart';
import 'package:xbr_gaode_amap/xbr_gaode_amap.dart';
import 'package:xbr_gaode_amap_example/core/confirm_dialog.dart';
import 'package:xbr_gaode_amap_example/core/permission_util.dart';

import 'demo_page/amap_search_page.dart';
import 'demo_page/location_map_page_page.dart';
import 'demo_page/planning_map_page_page.dart';

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

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
    // 测试时可以用下面的KEY,这是本人申请的个人账户，上线自己申请
    initKey(
      androidKey: "0d0a960349e6b9cfcbffa6bf5d8b553e",
      iosKey: "6576199a6c246345e57fee50d2edc8d1",
    );
  }

  // 建议在工具类一键处理 key应该都一样
  void initKey({androidKey, iosKey}) {
    // 地图初始化
    XbrGaodeAmap.initKey(androidKey: androidKey, iosKey: iosKey);
    XbrGaodeAmap.updatePrivacy(hasContains: true, hasShow: true, hasAgree: true);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

/// 测试页
class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool permissionSuccess = false;
  String permissionMessage = "正在授权";

  [@override](/user/override)
  void initState() {
    super.initState();
    initPermission();
  }

  /// 动态权限
  initPermission() {
    PermissionUtil.requestPermissions(context, (success, msg) {
      setState(() {
        permissionSuccess = success;
        permissionMessage = msg;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('小镖人高德地图测试'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(permissionMessage),
            SizedBox(height: 20),
            ElevatedButton(
              child: Text("打开高德地图--显示定位，位置标注"),
              onPressed: () {
                if (permissionSuccess == false) {
                  ConfirmDialog.show(context, title: "授权未成功", text: "重新授权？", surePass: () {
                    initPermission();
                  });
                  return;
                }
                Navigator.push(context, MaterialPageRoute(builder: (context) => LocationMapPage()));
              },
            ),
            ElevatedButton(
              child: Text("打开高德地图--地址搜索"),
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) => AmapSearchPage()));
              },
            ),
            ElevatedButton(
              child: Text("打开高德地图--线路规划"),
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) => PlanningMapPage()));
              },
            ),
            ElevatedButton(
              child: Text("猎鹰轨迹--日志窗口"),
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) => PlanningMapPage()));
              },
            ),
          ],
        ),
      ),
    );
  }
}