diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index 06bc97b554..7672d875bd 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -273,6 +273,7 @@ export default {
       }
       const components = deepCopy(this.componentData)
       components.forEach(view => {
+        if (view.DetailAreaCode) { view.DetailAreaCode = null }
         if (view.filters && view.filters.length > 0) { view.filters = [] }
         if (view.type === 'de-tabs') {
           view.options.tabList && view.options.tabList.length > 0 && view.options.tabList.forEach(tab => {
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 6beddbea39..a3ae3faf26 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -609,9 +609,9 @@ export default {
         const current = this.$refs[this.element.propValue.id]
 
         if (this.chart.isPlugin) {
-          current && current.callPluginInner && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: null })
+          current && current.callPluginInner && this.setDetailMapCode(null) && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: null })
         } else {
-          current && current.registerDynamicMap && current.registerDynamicMap(null)
+          current && current.registerDynamicMap && this.setDetailMapCode(null) && current.registerDynamicMap(null)
         }
       }
     },
@@ -639,12 +639,17 @@ export default {
       this.currentAcreaNode = tempNode
       const current = this.$refs[this.element.propValue.id]
       if (this.chart.isPlugin) {
-        current && current.callPluginInner && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: this.currentAcreaNode.code })
+        current && current.callPluginInner && this.setDetailMapCode(this.currentAcreaNode.code) && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: this.currentAcreaNode.code })
       } else {
-        current && current.registerDynamicMap && current.registerDynamicMap(this.currentAcreaNode.code)
+        current && current.registerDynamicMap && this.setDetailMapCode(this.currentAcreaNode.code) && current.registerDynamicMap(this.currentAcreaNode.code)
       }
     },
 
+    setDetailMapCode(code) {
+      this.element.DetailAreaCode = code
+      return true
+    },
+
     // 切换下一级地图
     sendToChildren(param) {
       const length = param.data.dimensionList.length
@@ -660,9 +665,9 @@ export default {
         this.currentAcreaNode = nextNode
         const current = this.$refs[this.element.propValue.id]
         if (this.chart.isPlugin) {
-          nextNode && current && current.callPluginInner && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: nextNode.code })
+          nextNode && current && current.callPluginInner && this.setDetailMapCode(nextNode.code) && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: nextNode.code })
         } else {
-          nextNode && current && current.registerDynamicMap && current.registerDynamicMap(nextNode.code)
+          nextNode && current && current.registerDynamicMap && this.setDetailMapCode(nextNode.code) && current.registerDynamicMap(nextNode.code)
         }
       }
     },
diff --git a/frontend/src/components/canvas/custom-component/UserViewDialog.vue b/frontend/src/components/canvas/custom-component/UserViewDialog.vue
index 46e42e9e18..b84898e7b3 100644
--- a/frontend/src/components/canvas/custom-component/UserViewDialog.vue
+++ b/frontend/src/components/canvas/custom-component/UserViewDialog.vue
@@ -6,10 +6,10 @@
           <plugin-com
             v-if="chart.isPlugin"
             :component-name="chart.type + '-view'"
-            :obj="{chart}"
+            :obj="{chart: mapChart || chart}"
             class="chart-class"
           />
-          <chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" class="chart-class" :chart="chart" />
+          <chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" class="chart-class" :chart="mapChart || chart" />
           <chart-component-g2 v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
           <chart-component-s2 v-else-if="chart.type === 'table-pivot' && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
           <label-normal v-else-if="chart.type.includes('text')" :chart="chart" class="table-class" />
@@ -62,6 +62,13 @@ export default {
     }
   },
   computed: {
+    mapChart() {
+      if (this.chart.type && (this.chart.type === 'map' || this.chart.type === 'buddle-map')) {
+        const temp = JSON.parse(JSON.stringify(this.chart))
+        return { ...temp, ...{ DetailAreaCode: this.curComponent.DetailAreaCode }}
+      }
+      return null
+    },
     showChartCanvas() {
       return !this.chart.type.includes('table')
     },
diff --git a/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue b/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
index 6ca001d10e..eb4a70de29 100644
--- a/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
+++ b/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
@@ -1,7 +1,13 @@
 <template>
   <de-container>
     <de-main-container v-if="chart.type !== 'table-normal' && chart.type !== 'table-info'" :style="customStyle" class="full-div">
-      <chart-component v-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" class="chart-class" :chart="chart" />
+      <plugin-com
+        v-if="chart.isPlugin"
+        :component-name="chart.type + '-view'"
+        :obj="{chart: mapChart || chart}"
+        class="chart-class"
+      />
+      <chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" class="chart-class" :chart="mapChart || chart" />
       <chart-component-g2 v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
       <chart-component-s2 v-else-if="chart.type === 'table-pivot' && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
       <label-normal v-else-if="chart.type.includes('text')" :chart="chart" class="table-class" />
@@ -44,6 +50,13 @@ export default {
     }
   },
   computed: {
+    mapChart() {
+      if (this.chart.type && (this.chart.type === 'map' || this.chart.type === 'buddle-map')) {
+        const temp = JSON.parse(JSON.stringify(this.chart))
+        return { ...temp, ...{ DetailAreaCode: this.curComponent.DetailAreaCode }}
+      }
+      return null
+    },
     customStyle() {
       let style = {
       }
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index 3082ccf498..b60db2e98b 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -229,7 +229,7 @@ export default {
           this.myChart.clear()
           return
         }
-        const cCode = this.dynamicAreaCode || customAttr.areaCode
+        const cCode = this.chart.DetailAreaCode || this.dynamicAreaCode || customAttr.areaCode
         if (this.$store.getters.geoMap[cCode]) {
           const json = this.$store.getters.geoMap[cCode]
           this.initMapChart(json, chart)
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 95786af85f..bd920ed8d6 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1403,6 +1403,7 @@ export default {
       return this.$store.state.panel.panelInfo
     },
     ...mapState([
+      'curComponent',
       'panelViewEditInfo'
     ])
     /* pluginRenderOptions() {
@@ -2469,6 +2470,7 @@ export default {
         this.backToParent(0, length)
         this.currentAcreaNode = null
         const current = this.$refs.dynamicChart
+        this.setDetailMapCode(null)
         if (this.view.isPlugin) {
           current && current.callPluginInner && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: null })
         } else {
@@ -2503,15 +2505,20 @@ export default {
       // this.$refs.dynamicChart && this.$refs.dynamicChart.registerDynamicMap && this.$refs.dynamicChart.registerDynamicMap(this.currentAcreaNode.code)
       const current = this.$refs.dynamicChart
       if (this.view.isPlugin) {
-        current && current.callPluginInner && current.callPluginInner({
+        current && current.callPluginInner && this.setDetailMapCode(this.currentAcreaNode.code) && current.callPluginInner({
           methodName: 'registerDynamicMap',
           methodParam: this.currentAcreaNode.code
         })
       } else {
-        current && current.registerDynamicMap && current.registerDynamicMap(this.currentAcreaNode.code)
+        current && current.registerDynamicMap && this.setDetailMapCode(this.currentAcreaNode.code) && current.registerDynamicMap(this.currentAcreaNode.code)
       }
     },
 
+    setDetailMapCode(code) {
+      this.curComponent.DetailAreaCode = code
+      return true
+    },
+
     // 切换下一级地图
     sendToChildren(param) {
       const length = param.data.dimensionList.length
@@ -2530,12 +2537,12 @@ export default {
         // this.$refs.dynamicChart && this.$refs.dynamicChart.registerDynamicMap && this.$refs.dynamicChart.registerDynamicMap(nextNode.code)
         const current = this.$refs.dynamicChart
         if (this.view.isPlugin) {
-          nextNode && current && current.callPluginInner && current.callPluginInner({
+          nextNode && current && current.callPluginInner && this.setDetailMapCode(nextNode.code) && current.callPluginInner({
             methodName: 'registerDynamicMap',
             methodParam: nextNode.code
           })
         } else {
-          nextNode && current && current.registerDynamicMap && current.registerDynamicMap(nextNode.code)
+          nextNode && current && current.registerDynamicMap && this.setDetailMapCode(nextNode.code) && current.registerDynamicMap(nextNode.code)
         }
         return nextNode
       }