diff --git a/core/core-frontend/src/views/system/parameter/map/OnlineMapGaode.vue b/core/core-frontend/src/views/system/parameter/map/OnlineMapGaode.vue
new file mode 100644
index 0000000..3a56e98
--- /dev/null
+++ b/core/core-frontend/src/views/system/parameter/map/OnlineMapGaode.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+
+const domId = ref('de-map-container')
+const center: [number, number] = [116.397428, 39.90923]
+const mapInstance = ref(null)
+const mapReloading = ref(false)
+
+const props = defineProps<{
+  mapKey: string
+  securityCode?: string
+}>()
+
+const loadMap = () => {
+  if (!props.mapKey) {
+    return
+  }
+  const mykey = props.mapKey
+  const url = `https://webapi.amap.com/maps?v=2.0&key=${mykey}`
+
+  loadScript(url)
+    .then(() => {
+      if (mapInstance.value) {
+        mapInstance.value?.destroy()
+        mapInstance.value = null
+        mapReloading.value = true
+        setTimeout(() => {
+          domId.value = domId.value + '-de-'
+          mapReloading.value = false
+          nextTick(() => {
+            createMapInstance()
+          })
+        }, 1500)
+
+        return
+      }
+      createMapInstance()
+    })
+    .catch(e => {
+      console.error(e)
+      if (mapInstance.value) {
+        mapInstance.value.destroy()
+        mapInstance.value = null
+      }
+    })
+}
+const createMapInstance = () => {
+  if (window.AMap) {
+    mapInstance.value = new window.AMap.Map(domId.value, {
+      viewMode: '2D',
+      zoom: 11,
+      center: center
+    })
+  }
+}
+const loadScript = (url: string) => {
+  return new Promise(function (resolve, reject) {
+    const scriptId = 'de-gaode-script-id'
+    let dom = document.getElementById(scriptId)
+    if (dom) {
+      dom.parentElement?.removeChild(dom)
+      dom = null
+      window.AMap = null
+    }
+    const script = document.createElement('script')
+
+    script.id = scriptId
+    script.onload = function () {
+      return resolve(null)
+    }
+    script.onerror = function () {
+      return reject(new Error('Load script from '.concat(url, ' failed')))
+    }
+    script.src = url
+    const head = document.head || document.getElementsByTagName('head')[0]
+    ;(document.body || head).appendChild(script)
+  })
+}
+
+onMounted(() => {
+  loadMap()
+})
+onBeforeUnmount(() => {
+  const scriptId = 'de-gaode-script-id'
+  let dom = document.getElementById(scriptId)
+  if (dom) {
+    dom.parentElement?.removeChild(dom)
+    dom = null
+    window.AMap = null
+  }
+})
+</script>
+
+<template>
+  <div class="de-map-container" v-if="!mapReloading" :id="domId" />
+</template>
+
+<style scoped lang="less">
+.de-map-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+</style>
diff --git a/core/core-frontend/src/views/system/parameter/map/OnlineMapQQ.vue b/core/core-frontend/src/views/system/parameter/map/OnlineMapQQ.vue
new file mode 100644
index 0000000..a53d4e1
--- /dev/null
+++ b/core/core-frontend/src/views/system/parameter/map/OnlineMapQQ.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+
+const domId = ref('de-map-container')
+const mapInstance = ref(null)
+const mapReloading = ref(false)
+
+const props = defineProps<{
+  mapKey: string
+  securityCode?: string
+}>()
+
+const loadMap = () => {
+  if (!props.mapKey) {
+    return
+  }
+  const mykey = props.mapKey
+  const url = `https://map.qq.com/api/gljs?v=1.exp&key=${mykey}`
+
+  loadScript(url)
+    .then(() => {
+      if (mapInstance.value) {
+        mapInstance.value?.destroy()
+        mapInstance.value = null
+        mapReloading.value = true
+        setTimeout(() => {
+          domId.value = domId.value + '-de-'
+          mapReloading.value = false
+          nextTick(() => {
+            createMapInstance()
+          })
+        }, 1500)
+
+        return
+      }
+      createMapInstance()
+    })
+    .catch(e => {
+      console.error(e)
+      if (mapInstance.value) {
+        mapInstance.value.destroy()
+        mapInstance.value = null
+      }
+    })
+}
+const createMapInstance = () => {
+  if (window.TMap) {
+    const center = new window.TMap.LatLng(39.90923, 116.397428)
+    mapInstance.value = new window.TMap.Map(document.getElementById(domId.value), {
+      viewMode: '2D',
+      zoom: 11,
+      center: center
+    })
+    mapInstance.value?.removeControl(window.TMap.constants.DEFAULT_CONTROL_ID.ZOOM)
+    mapInstance.value?.removeControl(window.TMap.constants.DEFAULT_CONTROL_ID.ROTATION)
+    mapInstance.value?.removeControl(window.TMap.constants.DEFAULT_CONTROL_ID.SCALE)
+  }
+}
+const loadScript = (url: string) => {
+  return new Promise(function (resolve, reject) {
+    const scriptId = 'de-qq-script-id'
+    let dom = document.getElementById(scriptId)
+    if (dom) {
+      dom.parentElement?.removeChild(dom)
+      dom = null
+      window.TMap = null
+    }
+    const script = document.createElement('script')
+
+    script.id = scriptId
+    script.onload = function () {
+      return resolve(null)
+    }
+    script.onerror = function () {
+      return reject(new Error('Load script from '.concat(url, ' failed')))
+    }
+    script.src = url
+    const head = document.head || document.getElementsByTagName('head')[0]
+    ;(document.body || head).appendChild(script)
+  })
+}
+
+onMounted(() => {
+  loadMap()
+})
+onBeforeUnmount(() => {
+  const scriptId = 'de-qq-script-id'
+  let dom = document.getElementById(scriptId)
+  if (dom) {
+    dom.parentElement?.removeChild(dom)
+    dom = null
+    window.TMap = null
+  }
+})
+</script>
+
+<template>
+  <div class="de-map-container" v-if="!mapReloading" :id="domId" />
+</template>
+
+<style scoped lang="less">
+.de-map-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+</style>
diff --git a/core/core-frontend/src/views/system/parameter/map/OnlineMapTdt.vue b/core/core-frontend/src/views/system/parameter/map/OnlineMapTdt.vue
new file mode 100644
index 0000000..af4e037
--- /dev/null
+++ b/core/core-frontend/src/views/system/parameter/map/OnlineMapTdt.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+
+const domId = ref('de-map-container')
+const center: [number, number] = [116.397428, 39.90923]
+const mapInstance = ref(null)
+const mapReloading = ref(false)
+
+const props = defineProps<{
+  mapKey: string
+  securityCode?: string
+}>()
+
+function destroyMap() {
+  const container = mapInstance.value?.getContainer()
+  while (container.hasChildNodes()) {
+    container.removeChild(container.firstChild)
+  }
+  mapInstance.value = null
+}
+
+const loadMap = () => {
+  if (!props.mapKey) {
+    return
+  }
+  const mykey = props.mapKey
+  const url = `https://api.tianditu.gov.cn/api?v=4.0&tk=${mykey}`
+
+  loadScript(url)
+    .then(() => {
+      if (mapInstance.value) {
+        destroyMap()
+        mapReloading.value = true
+        setTimeout(() => {
+          domId.value = domId.value + '-de-'
+          mapReloading.value = false
+          nextTick(() => {
+            createMapInstance()
+          })
+        }, 1500)
+
+        return
+      }
+      createMapInstance()
+    })
+    .catch(e => {
+      console.error(e)
+      if (mapInstance.value) {
+        destroyMap()
+      }
+    })
+}
+const createMapInstance = () => {
+  if (window.T) {
+    mapInstance.value = new window.T.Map(domId.value)
+    mapInstance.value.centerAndZoom(new T.LngLat(center[0], center[1]), 11)
+  }
+}
+const loadScript = (url: string) => {
+  return new Promise(function (resolve, reject) {
+    const scriptId = 'de-tdt-script-id'
+    let dom = document.getElementById(scriptId)
+    if (dom) {
+      dom.parentElement?.removeChild(dom)
+      dom = null
+      window.AMap = null
+    }
+    const script = document.createElement('script')
+
+    script.id = scriptId
+    script.onload = function () {
+      return resolve(null)
+    }
+    script.onerror = function () {
+      return reject(new Error('Load script from '.concat(url, ' failed')))
+    }
+    script.src = url
+    const head = document.head || document.getElementsByTagName('head')[0]
+    ;(document.body || head).appendChild(script)
+  })
+}
+
+onMounted(() => {
+  loadMap()
+})
+onBeforeUnmount(() => {
+  const scriptId = 'de-tdt-script-id'
+  let dom = document.getElementById(scriptId)
+  if (dom) {
+    dom.parentElement?.removeChild(dom)
+    dom = null
+    window.T = null
+  }
+})
+</script>
+
+<template>
+  <div class="de-map-container" v-if="!mapReloading" :id="domId" />
+</template>
+
+<style scoped lang="less">
+.de-map-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+</style>