Skip to content

Marker Disappears After Update When markersClusteringEnabled is Enabled on Huawei Map #391

Open
@Pholluxion

Description

@Pholluxion

Description

I am experiencing an issue with marker clustering on the Huawei Map when the markersClusteringEnabled option is enabled. Specifically, when I update a marker, it disappears from the map. However, the marker reappears when I adjust the zoom level, triggering a re-clustering process.

This issue seems to be related to the clustering mechanism not properly refreshing the marker after an update.

The expected behavior is for the marker to remain visible after an update, without requiring a zoom adjustment to re-cluster and display the marker again.

Steps to reproduce:

  • Enable markersClusteringEnabled.
  • Add markers to the map.
  • Update a marker's position or properties.
  • Observe that the marker disappears from the map.
  • Adjust the zoom level, and the marker reappears.

Please advise on how to resolve this issue or if there's a workaround.

Screenshots

Screenshot 1 Screenshot 2 Screenshot 3 Screenshot 4
3 1 2 4

Logs
I/HmsMapKit_MarkerImpl_56(25865): setInfoWindowAnchor 0.5,0.0
I/HmsMapKit_markerImpl_42(25865): addMarker options setIcon:android.graphics.Bitmap@5c99c01
E/RenderEngine_MarkerImpl(25865): setZIndex:Failure in parameter settin
I/HmsMapKit_MarkerImpl_56(25865): setInfoWindowAnchor 0.5,0.0
I/HmsMapKit_markerImpl_42(25865): addMarker options setIcon:android.graphics.Bitmap@47f9dd7
E/RenderEngine_MarkerImpl(25865): setZIndex:Failure in parameter settin

Environment

  • Platform: Flutter
  • Kit: Map
  • Kit Version: 6.11.2+303
  • OS Version 12
Example code
import 'dart:async';
import 'dart:math' show Random;

import 'package:flutter/material.dart';

import 'package:huawei_map/huawei_map.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    HuaweiMapInitializer.initializeMap();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Huawei Map Demo',
      home: HuaweiMapDemo(),
    );
  }
}

class HuaweiMapDemo extends StatefulWidget {
  const HuaweiMapDemo({super.key});

  @override
  State<HuaweiMapDemo> createState() => _HuaweiMapDemoState();
}

class _HuaweiMapDemoState extends State<HuaweiMapDemo> {
  late HuaweiMapController mapController;

  static const LatLng _center = LatLng(41.012959, 28.997438);
  final CameraPosition _initialCameraPosition =
      const CameraPosition(target: _center, zoom: 5);

  List<Marker> markers = [
    const Marker(
      clusterable: true,
      markerId: MarkerId('especific_marker'),
      position: _center,
    ),
    ...List.generate(
      5,
      (index) => Marker(
        clusterable: true,
        markerId: MarkerId('random_marker_$index'),
        position: LatLng(
          _center.lat + Random().nextDouble() * 0.05,
          _center.lng + Random().nextDouble() * 0.05,
        ),
        icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),
      ),
    ),
  ];

  @override
  void initState() {
    super.initState();
    _listenToStream();
  }

  void _listenToStream() {
    streamLatLngUpdates(_center).listen((LatLng data) {
      mapController.animateCamera(
        CameraUpdate.newLatLngZoom(data, 12),
      );
      updateMarker(data);
    });
  }

  void updateMarker(LatLng latLng) {
    setState(() {
      markers = List<Marker>.from(markers.where((marker) {
        return marker.markerId.id != 'especific_marker';
      }).toList());

      markers.add(
        Marker(
          clusterable: true,
          markerId: const MarkerId('especific_marker'),
          position: latLng,
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: HuaweiMap(
        // Enable clustering
        markersClusteringEnabled: true,
        markers: markers.toSet(),
        initialCameraPosition: _initialCameraPosition,
        onMapCreated: (controller) => mapController = controller,
        mapType: MapType.normal,
        padding: const EdgeInsets.only(bottom: 30.0),
        myLocationStyle: const MyLocationStyle(
          anchor: Offset(0.5, 0.5),
          radiusFillColor: Colors.red,
        ),
      ),
    );
  }
}

Stream<LatLng> streamLatLngUpdates(LatLng initialPosition) async* {
  while (true) {
    // wait for 5 seconds before emitting the next update
    await Future.delayed(const Duration(seconds: 5));

    final random = Random();

    final deltaLat = (random.nextDouble()) * 0.01;

    yield LatLng(
      initialPosition.lat,
      initialPosition.lng + deltaLat,
    );
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions