From 03ca6044f3382fcab273736382bf0f73fdce753b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=B0=8F=E6=B0=91?=
 <DesignHhuang@users.noreply.github.com>
Date: Thu, 2 Nov 2023 19:34:11 +0800
Subject: [PATCH] feat: baidu map demo (#248)

* feat: baidu map demo

* chore: format code

---------

Co-authored-by: likui628 <90845831+likui628@users.noreply.github.com>
---
 .../admin/src/pages/demo/charts/map/Baidu.vue |  5 +-
 packages/demo/index.ts                        |  1 +
 packages/demo/package.json                    |  1 +
 packages/demo/src/Charts/Baidu.vue            | 90 ++++++++++++++++++
 packages/hooks/src/web/index.ts               |  1 +
 packages/hooks/src/web/useScript.ts           | 46 ++++++++++
 pnpm-lock.yaml                                | 92 +++++++++----------
 7 files changed, 186 insertions(+), 50 deletions(-)
 create mode 100644 packages/demo/src/Charts/Baidu.vue
 create mode 100644 packages/hooks/src/web/useScript.ts

diff --git a/apps/admin/src/pages/demo/charts/map/Baidu.vue b/apps/admin/src/pages/demo/charts/map/Baidu.vue
index d7937914..759d2177 100644
--- a/apps/admin/src/pages/demo/charts/map/Baidu.vue
+++ b/apps/admin/src/pages/demo/charts/map/Baidu.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-
+import { Baidu } from '@vben/demo'
 </script>
 <template>
-  <div>Demo待补充</div>
+  <Baidu />
 </template>
+ 
\ No newline at end of file
diff --git a/packages/demo/index.ts b/packages/demo/index.ts
index f1a58c85..2b84013b 100644
--- a/packages/demo/index.ts
+++ b/packages/demo/index.ts
@@ -7,3 +7,4 @@ export { default as TreeTable } from './src/Table/TreeTable.vue'
 export { default as Modal } from './src/Modal/index.vue'
 export { default as Basic } from './src/Basic/index.vue'
 export { default as Gaode } from './src/Charts/Gaode.vue'
+export { default as Baidu } from './src/Charts/Baidu.vue'
\ No newline at end of file
diff --git a/packages/demo/package.json b/packages/demo/package.json
index 470b0f64..ff521c25 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -14,6 +14,7 @@
     "@vben/request": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vben/vbencomponents": "workspace:*",
+    "@vben/hooks": "workspace:*",
     "vue": "^3.3.6"
   },
   "devDependencies": {
diff --git a/packages/demo/src/Charts/Baidu.vue b/packages/demo/src/Charts/Baidu.vue
new file mode 100644
index 00000000..944c0f78
--- /dev/null
+++ b/packages/demo/src/Charts/Baidu.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import { ref, unref, onMounted } from 'vue'
+import { useDebounceFn } from '@vben/utils'
+import { useScript } from '@vben/hooks'
+defineProps({
+  width: {
+    type: String,
+    default: '100%',
+  },
+  height: {
+    type: String,
+    default: 'calc(100vh - 90px)',
+  },
+})
+const emit = defineEmits(['change-point', 'point-changed'])
+const wrapRef = ref<HTMLDivElement | null>(null)
+const map = ref()
+const BMap = ref()
+const geo = ref()
+const BAI_DU_MAP_URL =
+  'https://api.map.baidu.com/api?v=3.0&ak=qiDNjcA9vYIY7HhzebKkWue4lpSR5z9M&callback=initialize'
+const { load } = useScript({ src: BAI_DU_MAP_URL })
+const initBaiduMap = async () => {
+  await load()
+  setTimeout(() => {
+    const wrapEl = unref(wrapRef)
+    if (!wrapEl) return
+    BMap.value = (window as any).BMap
+    map.value = new BMap.value.Map(wrapEl)
+    geo.value = new BMap.value.Geocoder()
+    const point = new BMap.value.Point(120.373487, 31.508123)
+    map.value.centerAndZoom(point, 15)
+    map.value.enableScrollWheelZoom(true)
+    map.value.addEventListener('click', function (e) {
+      map.value.clearOverlays()
+      const pt = e.point
+      const marker = new BMap.value.Marker(new BMap.value.Point(pt.lng, pt.lat))
+      map.value.addOverlay(marker)
+      latlng2text(pt)
+      emit('change-point', e.point)
+    })
+  }, 100)
+}
+// 地理坐标转化成具体的地理位置
+const latlng2text = (point) => {
+  geo.value.getLocation(point, function (rs) {
+    if (rs) {
+      emit('point-changed', rs.address)
+    } else {
+      console.log('The address you selected did not resolve to a result')
+    }
+  })
+}
+const handleInput = useDebounceFn((value: string) => {
+  geo.value.getPoint(value, (point) => {
+    if (point) {
+      map.value.centerAndZoom(point, 16)
+    } else {
+      console.log('Geo can not find this place')
+    }
+  })
+}, 500)
+onMounted(() => {
+  initBaiduMap()
+})
+</script>
+
+<template>
+  <div class="bmap-input">
+    <VbenInput clearable placeholder="search" @input="handleInput">
+      <template #prefix>
+        <VbenIconify
+          :size="20"
+          color="gray"
+          icon="ant-design:search-outlined"
+        />
+      </template>
+    </VbenInput>
+  </div>
+  <div ref="wrapRef" :style="{ height, width }"></div>
+</template>
+
+<style lang="less" scoped>
+.bmap-input {
+  margin: 15px;
+  position: absolute;
+  width: 320px;
+  z-index: 10000;
+}
+</style>
diff --git a/packages/hooks/src/web/index.ts b/packages/hooks/src/web/index.ts
index c66c1db1..c4bbc44b 100644
--- a/packages/hooks/src/web/index.ts
+++ b/packages/hooks/src/web/index.ts
@@ -5,3 +5,4 @@ export * from './useAppInject'
 export * from './useAppContext'
 export * from './useFullContent'
 export * from './useDesign'
+export * from './useScript'
\ No newline at end of file
diff --git a/packages/hooks/src/web/useScript.ts b/packages/hooks/src/web/useScript.ts
new file mode 100644
index 00000000..f01b414e
--- /dev/null
+++ b/packages/hooks/src/web/useScript.ts
@@ -0,0 +1,46 @@
+import { onMounted, onUnmounted, ref } from 'vue'
+
+interface ScriptOptions {
+  src: string
+}
+
+export function useScript(opts: ScriptOptions) {
+  const isLoading = ref(false)
+  const error = ref(false)
+  const success = ref(false)
+  let script: HTMLScriptElement
+
+  const promise = new Promise<void>((resolve, reject) => {
+    onMounted(() => {
+      script = document.createElement('script')
+      script.type = 'text/javascript'
+      script.onload = function () {
+        isLoading.value = false
+        success.value = true
+        error.value = false
+        resolve()
+      }
+
+      script.onerror = function (err) {
+        isLoading.value = false
+        success.value = false
+        error.value = true
+        reject(err)
+      }
+
+      script.src = opts.src
+      document.head.appendChild(script)
+    })
+  })
+
+  onUnmounted(() => {
+    script && script.remove()
+  })
+
+  return {
+    isLoading,
+    error,
+    success,
+    load: () => promise,
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2defa022..88566dd2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -391,6 +391,9 @@ importers:
       '@amap/amap-jsapi-loader':
         specifier: ^1.0.1
         version: 1.0.1
+      '@vben/hooks':
+        specifier: workspace:*
+        version: link:../hooks
       '@vben/request':
         specifier: workspace:*
         version: link:../request
@@ -683,7 +686,7 @@ importers:
   packages/vbenComponents:
     dependencies:
       '@iconify/iconify':
-        specifier: ^3.1.1
+        specifier: ^3.0.0
         version: 3.1.1
       '@vben/constants':
         specifier: workspace:*
@@ -695,21 +698,21 @@ importers:
         specifier: workspace:*
         version: link:../utils
       sass:
-        specifier: ^1.69.4
-        version: 1.69.4
+        specifier: ^1.55.0
+        version: 1.55.0
       vue:
-        specifier: ^3.3.6
-        version: 3.3.6(typescript@5.2.2)
+        specifier: ^3.2.47
+        version: 3.3.4
       vxe-table-demonic:
-        specifier: ^4.5.4
-        version: 4.5.4(vue@3.3.6)(xe-utils@3.5.13)
+        specifier: ^4.5.0-beta.3
+        version: 4.5.4(vue@3.3.4)(xe-utils@3.5.7)
       xe-utils:
-        specifier: ^3.5.13
-        version: 3.5.13
+        specifier: ^3.5.7
+        version: 3.5.7
     devDependencies:
       '@iconify/json':
-        specifier: ^2.2.132
-        version: 2.2.132
+        specifier: ^2.2.15
+        version: 2.2.15
       '@purge-icons/generated':
         specifier: ^0.9.0
         version: 0.9.0
@@ -843,7 +846,7 @@ packages:
       '@babel/helper-compilation-targets': 7.22.10
       '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.10)
       '@babel/helpers': 7.22.10
-      '@babel/parser': 7.22.10
+      '@babel/parser': 7.23.0
       '@babel/template': 7.22.5
       '@babel/traverse': 7.22.10
       '@babel/types': 7.22.10
@@ -974,7 +977,7 @@ packages:
       '@babel/helper-module-imports': 7.22.5
       '@babel/helper-simple-access': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/helper-validator-identifier': 7.22.5
+      '@babel/helper-validator-identifier': 7.22.20
 
   /@babel/helper-optimise-call-expression@7.22.5:
     resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==}
@@ -1085,13 +1088,6 @@ packages:
     dev: true
     optional: true
 
-  /@babel/parser@7.22.10:
-    resolution: {integrity: sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.22.10
-
   /@babel/parser@7.23.0:
     resolution: {integrity: sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==}
     engines: {node: '>=6.0.0'}
@@ -1587,7 +1583,7 @@ packages:
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.10)
       '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-validator-identifier': 7.22.5
+      '@babel/helper-validator-identifier': 7.22.20
     dev: false
 
   /@babel/plugin-transform-modules-umd@7.22.5(@babel/core@7.22.10):
@@ -1986,7 +1982,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.22.10
-      '@babel/parser': 7.22.10
+      '@babel/parser': 7.23.0
       '@babel/types': 7.22.10
 
   /@babel/traverse@7.22.10:
@@ -1999,7 +1995,7 @@ packages:
       '@babel/helper-function-name': 7.22.5
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.22.10
+      '@babel/parser': 7.23.0
       '@babel/types': 7.22.10
       debug: 4.3.4
       globals: 11.12.0
@@ -3466,8 +3462,8 @@ packages:
       pathe: 1.1.1
     dev: true
 
-  /@iconify/json@2.2.132:
-    resolution: {integrity: sha512-iRhfaUp7yQvez1lubMgjtBflpPXl2/2ItOoEybbA+u4Xv9sOJ3n7131DavvzhXqWiRu2NOhGpiGoqcU4RlOLnA==}
+  /@iconify/json@2.2.15:
+    resolution: {integrity: sha512-+BVLIjTJpBiEOGD3xhCY7/ajH+7QTl/jzF59gf9Hf5y/HyU8D+HUmOsXEGLIsCZErEQB66wZ36AziOlYf3wuPA==}
     dependencies:
       '@iconify/types': 2.0.0
       pathe: 1.1.1
@@ -5081,7 +5077,7 @@ packages:
     dev: false
 
   /archive-type@4.0.0:
-    resolution: {integrity: sha1-+S5yIzBW38aWlHJ0nCZ72wRrHXA=}
+    resolution: {integrity: sha512-zV4Ky0v1F8dBrdYElwTvQhweQ0P7Kwc1aluqJsYtOBP01jXcWCyW2IEfI1YiqsG+Iy7ZR+o5LF1N+PGECBxHWA==}
     engines: {node: '>=4'}
     dependencies:
       file-type: 4.4.0
@@ -5564,7 +5560,7 @@ packages:
     dev: false
 
   /cacheable-request@2.1.4:
-    resolution: {integrity: sha1-DYCIAbY0KtM8kd+dC0TcCbkeXD0=}
+    resolution: {integrity: sha512-vag0O2LKZ/najSoUwDbVlnlCFvhBE/7mGTY2B5FgCBDcRD+oVV1HYTOwM6JZfMg/hIcM6IwnTZ1uQQL5/X3xIQ==}
     dependencies:
       clone-response: 1.0.2
       get-stream: 3.0.0
@@ -5808,7 +5804,7 @@ packages:
       wrap-ansi: 7.0.0
 
   /clone-response@1.0.2:
-    resolution: {integrity: sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=}
+    resolution: {integrity: sha512-yjLXh88P599UOyPTFX0POsd7WxnbsVsGohcwzHOLspIhhpalPw1BcqED8NblyZLKcGrL8dTgMlcaZxV2jAD41Q==}
     dependencies:
       mimic-response: 1.0.1
     dev: false
@@ -7665,7 +7661,7 @@ packages:
     dev: false
 
   /file-type@4.4.0:
-    resolution: {integrity: sha1-G2AOX8ofvcboDApwxxyNul95BsU=}
+    resolution: {integrity: sha512-f2UbFQEk7LXgWpi5ntcO86OeA/cC80fuDDDaX/fZ2ZGel+AF7leRQqBBW1eJNiiQkrZlAoM6P+VYP5P6bOlDEQ==}
     engines: {node: '>=4'}
     dev: false
 
@@ -7867,7 +7863,7 @@ packages:
     dev: false
 
   /from2@2.3.0:
-    resolution: {integrity: sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=}
+    resolution: {integrity: sha512-OMcX/4IC/uqEPVgGeyfN22LJk6AZrMkRZHxcHBMBvHScDGgwTm2GT2Wkgtocyd3JfZffjj2kYUDXXII0Fk9W0g==}
     dependencies:
       inherits: 2.0.4
       readable-stream: 2.3.8
@@ -8525,7 +8521,7 @@ packages:
     engines: {node: '>= 4'}
 
   /image-size@0.5.5:
-    resolution: {integrity: sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=}
+    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
     engines: {node: '>=0.10.0'}
     hasBin: true
     requiresBuild: true
@@ -8709,7 +8705,7 @@ packages:
     dev: true
 
   /into-stream@3.1.0:
-    resolution: {integrity: sha1-lvsKk2wSur1v8XUqF9BWFqvQlMY=}
+    resolution: {integrity: sha512-TcdjPibTksa1NQximqep2r17ISRiNE9fwlfbg3F8ANdvP5/yrFTew86VcO//jk4QTaMlbjypPBq76HN2zaKfZQ==}
     engines: {node: '>=4'}
     dependencies:
       from2: 2.3.0
@@ -9254,7 +9250,7 @@ packages:
     hasBin: true
 
   /json-buffer@3.0.0:
-    resolution: {integrity: sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=}
+    resolution: {integrity: sha512-CuUqjv0FUZIdXkHPI8MezCnFCdaTAacej1TZYulLoAg1h/PhwkdXFN4V/gzY4g+fMBCOV2xF+rp7t2XD2ns/NQ==}
     dev: false
 
   /json-buffer@3.0.1:
@@ -9607,7 +9603,7 @@ packages:
     dev: false
 
   /lowercase-keys@1.0.0:
-    resolution: {integrity: sha1-TjNms55/VFfjXxMkvfb4jQv8cwY=}
+    resolution: {integrity: sha512-RPlX0+PHuvxVDZ7xX+EBVAp4RsVxP/TdDSN2mJYdiq1Lc4Hz7EUSjUI7RZrKKlmrIzVhf6Jo2stj7++gVarS0A==}
     engines: {node: '>=0.10.0'}
     dev: false
 
@@ -10444,7 +10440,7 @@ packages:
     dev: false
 
   /p-is-promise@1.1.0:
-    resolution: {integrity: sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=}
+    resolution: {integrity: sha512-zL7VE4JVS2IFSkR2GQKDSPEVxkoH43/p7oEnwpdCndKYJO0HVeRB7fA8TJwuLOTBREtK0ea8eHaxdwcpob5dmg==}
     engines: {node: '>=4'}
     dev: false
 
@@ -11233,7 +11229,7 @@ packages:
     dev: false
 
   /prepend-http@2.0.0:
-    resolution: {integrity: sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=}
+    resolution: {integrity: sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA==}
     engines: {node: '>=4'}
     dev: false
 
@@ -11644,7 +11640,7 @@ packages:
       supports-preserve-symlinks-flag: 1.0.0
 
   /responselike@1.0.2:
-    resolution: {integrity: sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=}
+    resolution: {integrity: sha512-/Fpe5guzJk1gPqdJLJR5u7eG/gNY4nImjbRDaVWVMRhne55TCmj2i9Q+54PBRfatRC8v/rIiv9BN0pMd9OV5EQ==}
     dependencies:
       lowercase-keys: 1.0.1
     dev: false
@@ -11831,9 +11827,9 @@ packages:
   /safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  /sass@1.69.4:
-    resolution: {integrity: sha512-+qEreVhqAy8o++aQfCJwp0sklr2xyEzkm9Pp/Igu9wNPoe7EZEQ8X/MBvvXggI2ql607cxKg/RKOwDj6pp2XDA==}
-    engines: {node: '>=14.0.0'}
+  /sass@1.55.0:
+    resolution: {integrity: sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==}
+    engines: {node: '>=12.0.0'}
     hasBin: true
     dependencies:
       chokidar: 3.5.3
@@ -11874,7 +11870,7 @@ packages:
     dev: false
 
   /semver-truncate@1.1.2:
-    resolution: {integrity: sha1-V/Qd5pcHpicJp+AQS6IRcQnqR+g=}
+    resolution: {integrity: sha512-V1fGg9i4CL3qesB6U0L6XAm4xOJiHmt4QAacazumuasc03BvtFGIMCduv01JWQ69Nv+JST9TqhSCiJoxoY031w==}
     engines: {node: '>=0.10.0'}
     dependencies:
       semver: 5.7.2
@@ -12045,7 +12041,7 @@ packages:
     dev: false
 
   /sort-keys@2.0.0:
-    resolution: {integrity: sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=}
+    resolution: {integrity: sha512-/dPCrG1s3ePpWm6yBbxZq5Be1dXGLyLn9Z791chDC3NFrpkVbWGzkBwPN1knaciexFXgRJ7hzdnwZ4stHSDmjg==}
     engines: {node: '>=4'}
     dependencies:
       is-plain-obj: 1.1.0
@@ -13244,7 +13240,7 @@ packages:
     dev: false
 
   /url-parse-lax@3.0.0:
-    resolution: {integrity: sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=}
+    resolution: {integrity: sha512-NjFKA0DidqPa5ciFcSrXnAltTtzz84ogy+NebPvfEgAck0+TNg4UJ4IN+fB7zRZfbgUf0syOo9MDxFkDSMuFaQ==}
     engines: {node: '>=4'}
     dependencies:
       prepend-http: 2.0.0
@@ -13766,15 +13762,15 @@ packages:
       vue: 3.3.6(typescript@5.2.2)
     dev: true
 
-  /vxe-table-demonic@4.5.4(vue@3.3.6)(xe-utils@3.5.13):
+  /vxe-table-demonic@4.5.4(vue@3.3.4)(xe-utils@3.5.7):
     resolution: {integrity: sha512-L+y1rXt3F/uizH7xlurlu114cfzdE3C2RaaVeTTe5aepoJHBVpE6RHOAE7gQFAlDLUu/HeJkJVUF/DSQ5xpuww==}
     peerDependencies:
       vue: ^3.2.28
       xe-utils: ^3.5.0
     dependencies:
       dom-zindex: 1.0.1
-      vue: 3.3.6(typescript@5.2.2)
-      xe-utils: 3.5.13
+      vue: 3.3.4
+      xe-utils: 3.5.7
     dev: false
 
   /w3c-xmlserializer@4.0.0:
@@ -13930,8 +13926,8 @@ packages:
         optional: true
     dev: true
 
-  /xe-utils@3.5.13:
-    resolution: {integrity: sha512-ORT6ghCRk0mUVavMBxetcPzUPskS6NGfntzpWazJ86e+XU0uK4HwHfDhN/jKATiyInrOH5RwQo9SO/+DB8XeBw==}
+  /xe-utils@3.5.7:
+    resolution: {integrity: sha512-3H+fDBKBR2wLJgyA7k9C/w1Xljx6Maml5ukV0WDY06HjYyGs2FEz6XhcwRCLIDXX4pBP3Gu0nX9DbCeuuRA2Ew==}
     dev: false
 
   /xml-name-validator@4.0.0: