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 相关文章推荐
Java用自带的Image IO给图片添加水印
Jun 15 Java/Android
深入理解以DEBUG方式线程的底层运行原理
Jun 21 Java/Android
mybatis3中@SelectProvider传递参数方式
Aug 04 Java/Android
浅谈sql_@SelectProvider及使用注意说明
Aug 04 Java/Android
使用logback实现按自己的需求打印日志到自定义的文件里
Aug 30 Java/Android
Java使用Unsafe类的示例详解
Sep 25 Java/Android
springboot如何接收application/x-www-form-urlencoded类型的请求
Nov 02 Java/Android
关于maven依赖 ${xxx.version}报错问题
Jan 18 Java/Android
JavaWeb实现显示mysql数据库数据
Mar 19 Java/Android
Java Lambda表达式常用的函数式接口
Apr 07 Java/Android
Java实现带图形界面的聊天程序
Jun 10 Java/Android
SpringBoot详解执行过程
Jul 15 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
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
php防止sql注入简单分析
2015/03/18 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
任意位置显示html菜单
2007/02/01 Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
详解Vue之事件处理
2020/07/10 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
Python实现单词拼写检查
2015/04/25 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
Python内存读写操作示例
2018/07/18 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
爱护花草树木的标语
2014/06/11 职场文书
干部对照检查材料范文
2014/08/26 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
检讨书范文500字
2015/01/28 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
学校党员干部承诺书
2015/05/04 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书