Pārlūkot izejas kodu

优化地图标记点处理逻辑,增加对标记点数组的有效性检查,确保渲染时数据的正确性,提升代码可维护性和用户体验。

zyh 8 mēneši atpakaļ
vecāks
revīzija
6e49f62aff
2 mainītis faili ar 12 papildinājumiem un 8 dzēšanām
  1. 7 5
      client/admin/components_amap.tsx
  2. 5 3
      client/admin/pages_map.tsx

+ 7 - 5
client/admin/components_amap.tsx

@@ -308,7 +308,7 @@ export const useAMapMarkers = ({
   };
 
   useEffect(() => {
-    if (!map) return;
+    if (!map || !Array.isArray(markers)) return;
 
     // 清理旧的标记点和聚合点
     if (clusterInstance.current) {
@@ -319,10 +319,12 @@ export const useAMapMarkers = ({
     markersRef.current = [];
 
     // 根据配置添加新的标记点
-    if (showCluster) {
-      handleCluster();
-    } else {
-      handleMarkers();
+    if (markers.length > 0) {
+      if (showCluster) {
+        handleCluster();
+      } else {
+        handleMarkers();
+      }
     }
 
     return () => {

+ 5 - 3
client/admin/pages_map.tsx

@@ -107,9 +107,11 @@ export const LoginMapPage = () => {
   };
 
   // 渲染地图标记点
-  const renderMarkers = (locations: LoginLocation[]): MarkerData[] => {
+  const renderMarkers = (locations: LoginLocation[] = []): MarkerData[] => {
+    if (!Array.isArray(locations)) return [];
+    
     return locations
-      .filter(location => location.longitude !== null && location.latitude !== null)
+      .filter(location => location?.longitude !== null && location?.latitude !== null)
       .map(location => ({
         id: location.id?.toString() || '',
         longitude: location.longitude as number,
@@ -157,7 +159,7 @@ export const LoginMapPage = () => {
         <Spin spinning={markersLoading}>
           <div style={{ height: '100%', minHeight: '500px' }}>
             <AMap
-              markers={renderMarkers(locations)}
+              markers={renderMarkers(locations || [])}
               center={locations[0] && locations[0].longitude !== null && locations[0].latitude !== null 
                 ? [locations[0].longitude, locations[0].latitude] as [number, number] 
                 : undefined}