feat: baidu map demo (#248)

* feat: baidu map demo

* chore: format code

---------

Co-authored-by: likui628 <[email protected]>

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>
+

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'

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": {

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>

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'

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,
+  }
+}