diff --git a/src/pages/SecurityServiceOverview/components/MapCantainer/index.tsx b/src/pages/SecurityServiceOverview/components/MapCantainer/index.tsx
index 2ced58a2565e52d19e9bfb47772b580da54a3a04..f693eabee6bbc2dc95fe4d7e66209082375cb81b 100644
--- a/src/pages/SecurityServiceOverview/components/MapCantainer/index.tsx
+++ b/src/pages/SecurityServiceOverview/components/MapCantainer/index.tsx
@@ -1,8 +1,13 @@
 import Tabs from '@/components/Tabs';
-import { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import DistrictMap from './DistrictMap';
 import EmphasisAreaMap from './EmphasisAreaMap';
 import styles from './index.less';
+const Map: Record<string, React.FC> = {
+  '1': DistrictMap,
+  '2': EmphasisAreaMap,
+};
+
 const MapContainer = () => {
   const [topKey, setTopKey] = useState('1');
   const botItems = [
@@ -25,10 +30,10 @@ const MapContainer = () => {
     },
   ];
 
-  const Map: Record<string, JSX.Element> = {
-    '1': <DistrictMap />,
-    '2': <EmphasisAreaMap />,
-  };
+  const renderMap = useMemo(() => {
+    const MapComponent = Map[topKey];
+    return <MapComponent />;
+  }, [topKey]);
 
   return (
     <div className={styles.container}>
@@ -44,7 +49,7 @@ const MapContainer = () => {
           }}
         />
       </div>
-      <div className={styles.mapContent}>{Map[topKey]}</div>
+      <div className={styles.mapContent}>{renderMap}</div>
       <div className={styles.botTabWarp}>
         <div>
           {botItems?.map((item) => {