八、Flutter集成高德地图

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


    八、Flutter集成高德地图_第1张图片

这里就获取到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添加权限

    NSLocationWhenInUseUsageDescription
    需要用到定位
    UIBackgroundModes
    
        location
    

三、代码调用

上一步提到了在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节点下


    ...
    

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();
  }

你可能感兴趣的:(八、Flutter集成高德地图)