Flutter integra mapas de Gaode y agrega Maker personalizado

¡Acostúmbrate a escribir juntos! Este es el tercer día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .

En la actualidad, los tres gigantes de la plataforma abierta de mapas: AutoNavi, Baidu y Tencent básicamente apoyan el desarrollo y la integración de complementos de Flutter. También se puede ver desde aquí que la ecología de Flutter está mejorando gradualmente. A continuación se presentan algunos pasos y dificultades personales de la integración de mapas de AutoNavi en el proyecto Flutter.

1. Ingrese a la plataforma abierta AutoNavi Maps para solicitar una clave, y el lado de Android debe establecer el valor SHA1 de la versión de lanzamiento y la versión de depuración, que se pueden obtener aquí a través de la herramienta integrada de AndroidStudio. generar el valor de depuración SHA1. Lo mismo es cierto para la versión de lanzamiento. Luego establecemos el valor SHA1 y el nombre del paquete y hacemos clic en enviar. iOS es relativamente simple, solo necesita configurar el BundleId.

2. El complemento de integración de archivos yaml aquí uso la versión 3.0.0 (la función de posicionamiento depende de la integración de las necesidades personales).

# 高德地图、定位
amap_flutter_location: ^3.0.0
amap_flutter_map: ^3.0.0
复制代码

En este punto, hemos integrado con éxito la función de mapa en nuestro proyecto Flutter. Inicialización: agregue el control AMapWidget a la página que necesitamos y ajuste los siguientes parámetros según sus necesidades.

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);
    }
  },
),
复制代码

Atención especial : se debe configurar el parámetro de cumplimiento de la política de privacidad, de lo contrario, el mapa no se cargará y se debe configurar para que se inicialice después de la primera instalación y puesta en marcha de la ventana emergente. En la actualidad, el país otorga gran importancia a política de privacidad personal, y la revisión del mercado de aplicaciones de Android también presta atención a la privacidad personal.Aumento de los esfuerzos de auditoría. La integración básicamente se ha completado aquí y puede expandirla de acuerdo con las necesidades de su negocio.
3. Agregar una superposición oficial personalizada de Maker
solo admite agregar el tipo de mapa de bits y no puede agregar un control personalizado o un diseño personalizado como el nativo.

/// 覆盖物的图标
final BitmapDescriptor icon;
复制代码

Pero el funcionario tiene ese método: a través de la conversión de flujo de bytes, mi idea es convertir el Widget personalizado en un flujo de bytes y luego en un mapa de bits, ¿verdad?

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

Idea: convertir nuestro widget en una imagen a través de RenderObjectToWidgetElement y luego convertir la imagen en un flujo de bytes, que satisface perfectamente las necesidades de un creador personalizado.
Nota: si el widget personalizado tiene un componente de texto de texto, debe anidarse con Direccionalidad y agregarse con la propiedad textDiecton. Esta propiedad representa el orden de escritura, de izquierda a derecha, y algunos países son de derecha a izquierda, por lo que esta pieza necesita atención.

child: Directionality(
    textDirection: TextDirection.ltr,
    child:child),
复制代码

Código fuente:

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;
}
复制代码

Resumen:
la integración del mapa de Gaode es muy conveniente y la calidad del complemento es relativamente estable, porque no he usado Baidu y Tencent, y no es fácil de comparar, pero una cosa que vale la pena quejarse es que los tres principales los fabricantes ahora están cobrando conjuntamente por las cuentas corporativas. Tarifa de autorización empresarial, 50 000/año, sin descuento, siempre que sea una cuenta corporativa, se le cobrará 50 000 por un año, incluso si no hay tráfico. Esto realmente no es un problema para aplicaciones recientemente desarrolladas y sin mucho tráfico. Ginkgo~~, puedo cambiar la plataforma en el futuro, y luego compartir el plan de mapas de otras plataformas~~Fin