Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

[Bug] Map instance caching has buggy behavior when used with clustering

Đang mở
  • Có gì không ổn?
#627 1 bình luận 2 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 2 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
30/100
Loại issue
Lỗi
Độ rõ ràng
Cần làm rõ
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu bằng cách tái hiện luồng điều hướng được mô tả với component Map, reuseMaps={true} và ví dụ phân cụm marker sử dụng @googlemaps/markerclusterer. Theo dõi quá trình dọn dẹp các marker cụm khi điều hướng giữa các chế độ xem thành phố và xác định lý do các marker của thành phố trước đó vẫn còn. Được xem là hoàn thành khi việc thay đổi thành phố không còn để lại các marker cụm từ những chế độ xem trước đó trên bản đồ được lưu trong bộ nhớ đệm.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

bug
Description

I'm implementing an application that has a view /cities which allows you to view all cities on a google map. You can then navigate to view a specific cities at /cities/[id]. Each city then has markers for EV chargers in the city. The EV charger markers are clustered.

If I enable map instance caching via reuseMaps={true} I run into issues where cluster markers remain on the map as you navigate from one city to another. It's not obvious as you have to zoom out in order to see cluster markers from multiple cities.

I'm using @googlemaps/markerclusterer and the implementation follows the marker-clustering example in this repo.

I'm storing the cluster markers in an array stored in useRef in an attempt to be able to remove them when the component unmounts.

    return new MarkerClusterer({
      map,
      renderer: {
        render: (cluster, stats, map) => {
          const markerElem = renderClusterMarker({
            cluster,
            map,
            mapContentType,
          });
          // cluster markers are added to the array here
          clusterMarkerElems.current.push(markerElem);
          return markerElem;
        },
      },
    });

Then on unmount I'm attempting to remove the cluster markers:

  useEffect(() => {
    return () => {
      // This does not throw an error, but it does not seem to work 
      clusterMarkerElems.current.forEach((clusterMarkerElem) => {
        clusterMarkerElem.setMap(null);
      });
      setMarkers({});
      // markerClusterer is always null
      if (markerClusterer) {
        markerClusterer?.clearMarkers();
      }
    };
  }, []);

The code in the cleanup function does not throw an error, but it also doesn't work. I have a guess that the <Map> component is already removed by the time the cleanup function runs. If I run markerClusterer.clearMarkers() when the view loads it doesn't remove the stranded markers as I don't think it knows they exist.

Steps to Reproduce

See description.

Environment
  • Library version: 1.4.2
  • Google maps version: weekly
  • Browser and Version: Firefox latest
  • OS: macOS
Logs

No response

Ngôn ngữ chính
TypeScript
Star
1.9k
Fork
195
Merge trung bình
2 ngày 11 giờ
Pull request đã merge (30 ngày)
14

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của visgl/react-google-maps

Tất cả issue của visgl/react-google-maps

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.