八、Flutter集成高德地图

目前支持Flutter的第三方库还不多，地图作为一个高频使用的功能非常重要，但是国内常用的百度、高德都还没有官方的支持，只能找第三方库来支持。而第三方库目前做不到完全支持，像一些自定义地图和marker的绘制就很难搞定，只能进行定位和常规地图展示、搜索。
目前比较常用的有 flutter_amap_location 和 amap_base_flutter

① flutter_amap_location的集成使用

一、申请APIkey

前往 https://lbs.amap.com/api/android-sdk/guide/create-project/get-key 申请APIkey，新建一个应用，分别添加key，其中要获取SHA1值。

• Mac下AndroidStudio获取SHA1值：
  第一步、打开Android Studio的Terminal工具；
  第一步、输入命令：cd ~/.android ；
  第二步、输入命令：keytool -list -v -keystore debug.keystore ；
  第四步、输入Keystore密码，一般直接回车就行，或者输入android。

  
  

这里就获取到SHA1值，就可以在高德地图后台申请APIkey了。

而packageName就在build.gradle(app)里，取applicationId。

• 获取iOS Bundle identifier：
  用XCode打开我们的项目，按图获取到Bundle identifier

  
  

在后台填入添加key。

二、配置集成高德地图

添加依赖，无须填版本号

dependencies:
  amap_location:

导入包

import 'package:amap_location/amap_location.dart';

Android配置，在build.gradle(app)中添加AMAP_KEY即可。

android {
    .... 你的代码
    defaultConfig {
        .....
        manifestPlaceholders = [
                AMAP_KEY : "xxxxxx", /// 高德地图key
        ]

    }

iOS配置，在程序的主入口 main.dart

void main() {
  AMapLocationClient.setApiKey("xxxxxx");
  runApp(new MyApp());
}

在info.Plist添加权限

    <key>NSLocationWhenInUseUsageDescription</key>
    <string>需要用到定位</string>
    <key>UIBackgroundModes</key>
    <array>
        <string>location</string>
    </array>

三、代码调用

上一步提到了在main.dart设置iOS的key

void main() {
  AMapLocationClient.setApiKey("xxxxxx");
  runApp(new MyApp());
}

再在需要使用到的页面进行定位初始化，这里实现的功能比较简单，每次监听到坐标就赋值给lat和long，在Text中打印坐标

  //初始化定位监听，
  void _initLocation() async {
    AMapLocationClient.startup(new AMapLocationOption(
        desiredAccuracy: CLLocationAccuracy.kCLLocationAccuracyHundredMeters));

    //监听坐标实时变换
    AMapLocationClient.onLocationUpate.listen((AMapLocation loc) {
      if (!mounted) return;
      setState(() {
        lat = loc.latitude;
        long = loc.longitude;
      });
    });

    AMapLocationClient.startLocation();
  }

当前代码并没有对权限进行判断，若运行后lat、long打印出来是null，去设置里查看下是否打开了定位权限。如果有其他问题，查看loc.code，根据code去官网查看对应错误。

四、关闭定位

最后在dispose中关闭定位，防止内存泄漏

  @override
  void dispose() {
    //注意这里关闭
    AMapLocationClient.shutdown();
    super.dispose();
  }

但是目前为止只能进行定位，没办法进行地图展示等功能，功能不够丰富。

② amap_base_flutter的集成使用

amap_base_flutter包含的功能更多，不仅仅是定位，还集成了简单的地图展示、导航、搜索等功能，使用上和上个库也差不多，github上还有相关的demo： https://github.com/OpenFlutter/amap_base_flutter/tree/master/example/lib。

一、申请APIkey

APIkey的申请同上，申请过的话就直接用已经有的key。

二、添加依赖

添加依赖和flutter_amap_location差不多，在Android和iOS分别设置APPkey，需要权限的话，分别在配置文件中添加。
添加dependencies

  amap_base: ^0.2.12

导入包

  import 'package:amap_base/amap_base.dart';

Android配置
在AndroidManifest.xml中设置appkey，注意设置在application节点下

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

iOS配置同上，在程序的主入口 main.dart

void main() {
  AMap.init('您的Key');
  runApp(new MyApp());
}

另外显示地图的话需要另外设置，iOS端的UiKitView目前还只是preview状态, 默认是不支持的, 需要手动打开开关, 在info.plist文件中新增一行io.flutter.embedded_views_preview为true.

三、代码调用

核心代码

  final _amapLocation = AMapLocation();
  var _result = '';

  //初始化定位监听
  void _initLocation() async {
    _amapLocation.init();

    final options = LocationClientOptions(
      isOnceLocation: false,
      locatingWithReGeocode: true,
    );

    if (await Permissions().requestPermission()) {
      _amapLocation.startLocate(options).listen((_) => setState(() {
            _result =
                '坐标：${_.longitude}，${_.latitude} @ ${DateTime.now().hour}:${DateTime.now().minute}:${DateTime.now().second}';
          }));
    } else {
      setState(() {
        _result = "无定位权限";
      });
    }
  }

比上个库好的是它自带了一个权限检测的方法。

四、关闭定位

最后在dispose中关闭定位，防止内存泄漏

  @override
  void dispose() {
    //注意这里关闭
    _amapLocation.stopLocate();
    super.dispose();
  }