Flutter集成高德地图并添加自定义Maker的实践


Posted in Java/Android onApril 07, 2022

目前地图开放平台三大巨头:高德、百度、腾讯基本都支持Flutter插件开发集成。从这里也能看出Flutter的生态在逐渐的完善。下面介绍下在Flutter项目集成高德地图的一些步骤和个人踩得一些坑。

一、进入高德地图开放平台申请Key

Android端需要设置发布版本和调试版本SHA1值,这里可以通过AndroidStudio 自带工具获取,

Flutter集成高德地图并添加自定义Maker的实践

点击会生成调式SHA1值。发布版本同理。

Flutter集成高德地图并添加自定义Maker的实践

接着我们设置完SHA1值和包名之后点击提交即可。

Flutter集成高德地图并添加自定义Maker的实践

iOS相对简单,只需要设置BundleId即可。

Flutter集成高德地图并添加自定义Maker的实践

二、yaml文件集成插件

这里我用的3.0.0版本,(定位功能看个人需求集成)。

# 高德地图、定位
amap_flutter_location: ^3.0.0
amap_flutter_map: ^3.0.0

这时我们已经成功的将地图功能集成到我们的Flutter项目中来了。 初始化:在我们需要的页面添加AMapWidget控件,下面参数按自己需求调整,

AMapWidget(
  mapType: MapType.navi,// 地图类型
  // customStyleOptions: CustomStyleOptions(
  //   true,
  //   styleData: styleData,
  //   styleExtraData: styleExtraData,
  // ),// 离线地图 按需添加
  onTap: widget.onTap,// 地图点击事件
  rotateGesturesEnabled: false,//旋转手势
  tiltGesturesEnabled: false,//倾斜手势
  scaleEnabled: false,//平移滚动
  // 隐私政策合规
  privacyStatement: AMapPrivacyStatement(
      hasContains: true, hasShow: true, hasAgree: true),
  apiKey: GdMap.aMapApiKey,// 双端Key值初始化
  onMapCreated: onMapCreated,// 创建成功回调
  markers: Set<Marker>.of(_initMarkerMap.values),// 自定义添加标记物
  // onLocationChanged: (m) {
  //   print("位置回调---${m.accuracy}");
  //   print("位置回调精度---${m.latLng.latitude}");
  //   print("位置回调伟度---${m.latLng.longitude}");
  // },
  onCameraMoveEnd: (pos) {
    //缩放级别
    var zoom = pos.zoom;
    this.zoom = zoom;

    mapCenter =
        LatLng(pos.target.latitude, pos.target.longitude); // 更新中心点
    if (isLoad) {
      // 添加maker
      loadMakers(pos.target.latitude, pos.target.longitude);
    }
  },
),

特别注意:隐私政策合规这个参数必须要设置,否则地图加载不出来,并且一定要设置在首次安装启动弹窗之后初始化,目前国家对于个人隐私政策非常重视,Android应用市场的审核也对个人隐私加大了审核力度。到这里集成基本已经完成了,大家可以根据自己的业务需求来进行扩展。
三、添加自定义Maker
官方覆盖物只支持添加Bitmap类型,并不可以像原生那样添加一个自定义控件或者自定义布局,

/// 覆盖物的图标
final BitmapDescriptor icon;

但是官方有一个这样的方法:通过字节流转换,我的思路是将自定义Widget转换为字节流再转换为bitmap不就可以了吗?

/// 根据将PNG图片转换后的二进制数据[byteData]创建BitmapDescriptor
static BitmapDescriptor fromBytes(Uint8List byteData) {
  return BitmapDescriptor._(<dynamic>['fromBytes', byteData]);
}

思路: 通过RenderObjectToWidgetElement 将我们的Widget转换为image,再将image转换为字节流,这样就完美实现了自定义Maker的需求。
注意: 自定义Widget如果有文本Text组件的话必须加入Directionality嵌套并加上textDieecton属性,这个属性是代表书写顺序,从左到右,有些国家是从右到左,所以这块需要注意。

child: Directionality(
    textDirection: TextDirection.ltr,
    child:child),

源码:

static Future<ByteData?> widgetToImage(Widget widget,
    {Alignment alignment = Alignment.center,
    Size size = const Size(double.maxFinite, double.maxFinite),
    double devicePixelRatio = 1.0,
    double pixelRatio = 1.0}) async {
  RenderRepaintBoundary repaintBoundary = RenderRepaintBoundary();

  RenderView renderView = RenderView(
    child: RenderPositionedBox(alignment: alignment, child: repaintBoundary),
    configuration: ViewConfiguration(
      size: size,
      devicePixelRatio: devicePixelRatio,
    ),
    window: ui.window,
  );

  PipelineOwner pipelineOwner = PipelineOwner();
  pipelineOwner.rootNode = renderView;
  renderView.prepareInitialFrame();

  BuildOwner buildOwner = BuildOwner(focusManager: FocusManager());
  RenderObjectToWidgetElement rootElement = RenderObjectToWidgetAdapter(
    container: repaintBoundary,
    child: widget,
  ).attachToRenderTree(buildOwner);
  buildOwner.buildScope(rootElement);
  buildOwner.finalizeTree();

  pipelineOwner.flushLayout();
  pipelineOwner.flushCompositingBits();
  pipelineOwner.flushPaint();

  ui.Image image = await repaintBoundary.toImage(pixelRatio: pixelRatio);
  ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);

  return byteData;
}

总结:高德地图的集成还是非常方便的,插件质量也还算稳定,因为我没有用过百度和腾讯的也不好做比较,但是有一点值得吐槽的是现在三大厂商联合针对企业账号收取企业授权费,5万/年,还不打折,只要你是企业账号,就是没流量也要收你1年5万,这点真的对于新开发的App并且流量不多的情况下非常的不银杏~~ ,以后也许会更换平台,到时候再分享其他平台的地图方案

到此这篇关于Flutter集成高德地图并添加自定义Maker的实践的文章就介绍到这了,更多相关Flutter集成高德地图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Java/Android 相关文章推荐
springboot中一些比较常用的注解总结
Jun 11 Java/Android
Java并发编程必备之Future机制
Jun 30 Java/Android
gateway网关接口请求的校验方式
Jul 15 Java/Android
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
Jul 26 Java/Android
Java org.w3c.dom.Document 类方法引用报错
Aug 07 Java/Android
springboot中rabbitmq实现消息可靠性机制详解
Sep 25 Java/Android
mybatis源码解读之executor包语句处理功能
Feb 15 Java/Android
Java中API的使用方法详情
Apr 06 Java/Android
Java 超详细讲解hashCode方法
Apr 07 Java/Android
java版 简单三子棋游戏
May 04 Java/Android
解决Springboot PostMapping无法获取数据的问题
May 06 Java/Android
SpringBoot使用ip2region获取地理位置信息的方法
Jun 21 Java/Android
详解Flutter和Dart取消Future的三种方法
Apr 07 #Java/Android
java如何实现获取客户端ip地址的示例代码
Apr 07 #Java/Android
Android Flutter实现3D动画效果示例详解
Apr 07 #Java/Android
Android Flutter实现图片滑动切换效果
MyBatis配置文件解析与MyBatis实例演示
Java 深入探究讲解简单工厂模式
springboot用户数据修改的详细实现
Apr 06 #Java/Android
You might like
模板引擎正则表达式调试小技巧
2011/07/20 PHP
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
php解析json数据实例
2014/08/19 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
Python3多线程操作简单示例
2018/05/22 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
教育科研先进个人材料
2014/01/26 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
Redis读写分离搭建的完整步骤
2021/09/14 Redis
vue的项目如何打包上线
2022/04/13 Vue.js