Flutter怎么集成高德地图并添加自定义Maker

这篇文章主要介绍“Flutter怎么集成高德地图并添加自定义Maker”，在日常操作中，相信很多人在Flutter怎么集成高德地图并添加自定义Maker问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Flutter怎么集成高德地图并添加自定义Maker”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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

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

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

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

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

二、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;
}

到此，关于“Flutter怎么集成高德地图并添加自定义Maker”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！