From 76edd5dda31086d021eae5db4fef4b574f2bf209 Mon Sep 17 00:00:00 2001
From: alwayssuper <191763414@qq.com>
Date: Fri, 18 Jul 2025 10:34:50 +0800
Subject: [PATCH 1/5] feat:TODO  Ai

---
 src/views/iot/device/device/DeviceForm.vue               | 2 +-
 src/views/iot/device/device/detail/DeviceDetailsInfo.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/iot/device/device/DeviceForm.vue b/src/views/iot/device/device/DeviceForm.vue
index 9fe578885..5eb4b5ffc 100644
--- a/src/views/iot/device/device/DeviceForm.vue
+++ b/src/views/iot/device/device/DeviceForm.vue
@@ -151,7 +151,7 @@ const formData = ref({
   groupIds: [] as number[]
 })
 
-// 监听经纬度变化，更新location
+/** 监听经纬度变化，更新location */
 watch([() => formData.value.longitude, () => formData.value.latitude], ([newLong, newLat]) => {
   if (newLong && newLat) {
     formData.value.location = `${newLong},${newLat}`
diff --git a/src/views/iot/device/device/detail/DeviceDetailsInfo.vue b/src/views/iot/device/device/detail/DeviceDetailsInfo.vue
index 9500982ea..39a226d4e 100644
--- a/src/views/iot/device/device/detail/DeviceDetailsInfo.vue
+++ b/src/views/iot/device/device/detail/DeviceDetailsInfo.vue
@@ -151,12 +151,12 @@ const authPasswordVisible = ref(false) // 定义密码可见性状态
 const authInfo = ref<IotDeviceAuthInfoVO>({} as IotDeviceAuthInfoVO) // 定义设备认证信息对象
 
 // TODO @AI：注释使用 /** */ 风格，方法注释；
-// 控制地图显示的标志
+/** 控制地图显示的标志 */
 const showMap = computed(() => {
   return !!(device.longitude && device.latitude)
 })
 
-// 获取位置字符串，用于地图组件
+/** 获取位置字符串，用于地图组件 */
 const getLocationString = () => {
   if (device.longitude && device.latitude) {
     return `${device.longitude},${device.latitude}`
-- 
Gitee


From dffedc9840b413922ada82954b4d9cfb7a28a6ee Mon Sep 17 00:00:00 2001
From: alwayssuper <191763414@qq.com>
Date: Sat, 19 Jul 2025 11:25:24 +0800
Subject: [PATCH 2/5] feat: map

---
 .env                         |   3 +-
 src/components/Map/index.vue | 233 +++++++++++++++++++++--------------
 2 files changed, 142 insertions(+), 94 deletions(-)

diff --git a/.env b/.env
index 5eb9c9dd3..741e51ab9 100644
--- a/.env
+++ b/.env
@@ -25,5 +25,4 @@ VITE_APP_DEFAULT_LOGIN_USERNAME = admin
 VITE_APP_DEFAULT_LOGIN_PASSWORD = admin123
 
 # 高德地图
-VITE_AMAP_KEY='48eb85e0e245e293a0b61474943b177c'
-VITE_AMAP_SECURITY_CODE='86a45878caff8c0c60d88e80a93ddadd'
\ No newline at end of file
+VITE_BAIDU_MAP_KEY = 'efHIw2qmH8RzHPxK0z0rbCgzDVLup9LD'
\ No newline at end of file
diff --git a/src/components/Map/index.vue b/src/components/Map/index.vue
index eda8449cf..6cb55d73e 100644
--- a/src/components/Map/index.vue
+++ b/src/components/Map/index.vue
@@ -1,12 +1,10 @@
-<!-- 地图组件：基于高德地图实现 -->
-<!-- TODO @宗超：【设备定位】使用百度地图，和 ercharts 更好集成； -->
+<!-- 地图组件：基于百度地图实现 -->
 <template>
   <div v-if="props.isWrite">
     <el-form ref="form" label-width="120px">
       <el-form-item label="定位位置:">
-        <!-- TODO @TODO @AI：style 改成 unocss -->
         <el-select
-          style="width: 100%"
+          class="w-full"
           v-model="state.address"
           clearable
           filterable
@@ -14,7 +12,7 @@
           reserve-keyword
           placeholder="可输入地址查询经纬度"
           :remote-method="autoSearch"
-          @change="regeoCode"
+          @change="handleAddressSelect"
           :loading="state.loading"
         >
           <el-option
@@ -26,7 +24,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="设备地图:">
-        <div id="rwMap" class="mapContainer"></div>
+        <div id="bdMap" class="mapContainer"></div>
       </el-form-item>
     </el-form>
   </div>
@@ -34,12 +32,12 @@
     <el-descriptions :column="2" border :labelStyle="{ 'font-weight': 'bold' }">
       <el-descriptions-item label="设备位置:">{{ state.address }}</el-descriptions-item>
     </el-descriptions>
-    <div id="rMap" class="mapContainer"></div>
+    <div id="bdMap" class="mapContainer"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import AMapLoader from '@amap/amap-jsapi-loader'
+import { reactive, ref, onMounted } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 
 const emits = defineEmits(['locateChange', 'update:center'])
@@ -56,128 +54,180 @@ const state = reactive({
   autoComplete: null as any,
   tips: [] // 搜索提示
 })
+
 const props = defineProps({
   clickMap: propTypes.bool.def(false),
   isWrite: propTypes.bool.def(false),
   center: propTypes.string.def('')
 })
+
+/**
+ * 加载百度地图
+ */
 const loadMap = () => {
-  ;(window as any)._AMapSecurityConfig = {
-    securityJsCode: import.meta.env.VITE_AMAP_SECURITY_CODE
-  }
   state.address = ''
   state.latitude = ''
   state.longitude = ''
-  // TODO @AI：可以使用 await 方式么？
-  AMapLoader.load({
-    key: import.meta.env.VITE_AMAP_KEY, // 申请好的 Web 端开发者Key，首次调用 load 时必填
-    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-    plugins: [
-      // 逆解析插件
-      'AMap.Geocoder',
-      'AMap.AutoComplete'
-    ]
-  }).then(() => {
+  
+  // 创建百度地图API脚本
+  const script = document.createElement('script')
+  script.src = `https://api.map.baidu.com/api?v=3.0&ak=${import.meta.env.VITE_BAIDU_MAP_KEY}&callback=initBaiduMap`
+  document.body.appendChild(script)
+  
+  // 定义全局回调函数
+  window.initBaiduMap = () => {
     initMap()
+    initGeocoder()
+    initAutoComplete()
+    
     if (props.clickMap) {
-      state.map.on('click', (e) => {
-        state.lonLat = e.lnglat.lng + ',' + e.lnglat.lat
+      state.map.addEventListener('click', (e: any) => {
+        const point = e.point
+        state.lonLat = point.lng + ',' + point.lat
         regeoCode(state.lonLat)
       })
     }
-    initGeocoder()
-    initAutoComplete()
+    
     if (props.center) {
       regeoCode(props.center)
     }
-  })
+  }
 }
 
+/**
+ * 初始化地图
+ */
 const initMap = () => {
-  let mapId = props.isWrite ? 'rwMap' : 'rMap'
-  state.map = new (window as any).AMap.Map(mapId, {
-    resizeEnable: true,
-    zoom: 11, // 地图显示的缩放级别
-    keyboardEnable: false
-  })
+  const mapId = 'bdMap'
+  state.map = new window.BMap.Map(mapId)
+  state.map.centerAndZoom(new window.BMap.Point(116.404, 39.915), 11)
+  state.map.enableScrollWheelZoom()
+  state.map.disableDoubleClickZoom()
+  
+  // 添加地图控件
+  state.map.addControl(new window.BMap.NavigationControl())
+  state.map.addControl(new window.BMap.ScaleControl())
 }
 
+/**
+ * 初始化地理编码器
+ */
 const initGeocoder = () => {
-  state.geocoder = new (window as any).AMap.Geocoder({
-    city: '010', // 城市设为北京，默认：“全国”
-    radius: 500, // 范围，默认：500
-    extensions: 'all'
-  })
+  state.geocoder = new window.BMap.Geocoder()
 }
 
+/**
+ * 初始化自动完成
+ */
 const initAutoComplete = () => {
-  const autoOptions = {
-    city: '全国'
-  }
-  state.autoComplete = new (window as any).AMap.AutoComplete(autoOptions)
+  state.autoComplete = new window.BMap.Autocomplete({
+    input: "searchInput",
+    location: state.map
+  })
 }
 
+/**
+ * 搜索地址
+ * @param queryValue 搜索关键词
+ */
 const autoSearch = (queryValue: string) => {
-  state.autoComplete.search(queryValue, (_status, result) => {
-    // TODO @AI：下面的写法可以优化下么？
-    var res = result.tips || [] // 搜索成功时，result即是对应的匹配数据
-    const temp = ref<any[]>([])
-    res.forEach((p) => {
-      if ((p.name, p.location.lng && p.location.lat)) {
-        temp.value.push({
-          name: p.district + p.name,
-          value: p.location.lng + ',' + p.location.lat
+  if (!queryValue) {
+    state.mapAddrOptions = []
+    return
+  }
+  
+  state.loading = true
+  
+  // 使用百度地图地点检索服务
+  const localSearch = new window.BMap.LocalSearch(state.map, {
+    onSearchComplete: (results: any) => {
+      state.loading = false
+      const temp: any[] = []
+      
+      if (results && results.getPoi) {
+        const pois = results.getPoi()
+        pois.forEach((p: any) => {
+          const point = p.point
+          if (point && point.lng && point.lat) {
+            temp.push({
+              name: p.title,
+              value: point.lng + ',' + point.lat
+            })
+          }
         })
       }
-    })
-    state.mapAddrOptions = temp.value
+      
+      state.mapAddrOptions = temp
+    }
   })
+  
+  localSearch.search(queryValue)
 }
 
-// TODO @AI：方法注释，使用 /** */
-// 添加标记点
-const setMarker = (lnglat) => {
-  // TODO @AI: if return 简化下；
-  if (lnglat) {
-    // 如果点标记已存在则先移除原点
-    if (state.mapMarker !== null) {
-      state.map.remove(state.mapMarker)
-      state.lonLat = ''
-    }
-    // 定义点标记对象
-    state.mapMarker = new (window as any).AMap.Marker({
-      position: new (window as any).AMap.LngLat(lnglat[0], lnglat[1])
-    })
-    state.map.add(state.mapMarker) // 添加点标记在地图上
-    state.map.setCenter(lnglat)
-    state.map.setZoom(16)
-    state.mapMarker.setPosition(lnglat)
+/**
+ * 处理地址选择
+ * @param value 选中的地址值
+ */
+const handleAddressSelect = (value: string) => {
+  if (value) {
+    regeoCode(value)
   }
 }
 
-// TODO @AI：下面的写法可以优化下；例如说：
-// 经纬度转化为地址、添加标记点
-const regeoCode = (lonLat) => {
-  if (lonLat) {
-    // TODO @AI：变量名的拼写；
-    let lnglat = lonLat.split(',')
-    state.latitude = lnglat[0]
-    state.longitude = lnglat[1]
-    emits('locateChange', lnglat)
-    emits('update:center', lonLat)
-    setMarker(lnglat)
-    getAddress(lnglat)
+/**
+ * 添加标记点
+ * @param lnglat 经纬度数组
+ */
+const setMarker = (lnglat: any) => {
+  if (!lnglat) return
+  
+  // 如果点标记已存在则先移除原点
+  if (state.mapMarker !== null) {
+    state.map.removeOverlay(state.mapMarker)
+    state.lonLat = ''
   }
+  
+  // 创建新的标记点
+  const point = new window.BMap.Point(lnglat[0], lnglat[1])
+  state.mapMarker = new window.BMap.Marker(point)
+  
+  // 添加点标记到地图
+  state.map.addOverlay(state.mapMarker)
+  state.map.centerAndZoom(point, 16)
 }
 
-// TODO @AI：代码优化下；
-// 把拿到的经纬度转化为地址信息
-const getAddress = (lnglat) => {
-  state.geocoder.getAddress(lnglat, (status, result) => {
-    if (status === 'complete' && result.info === 'OK') {
-      if (result && result.regeocode) {
-        state.address = result.regeocode.formattedAddress
-      }
+/**
+ * 经纬度转化为地址、添加标记点
+ * @param lonLat 经度,纬度字符串
+ */
+const regeoCode = (lonLat: string) => {
+  if (!lonLat) return
+  
+  const lnglat = lonLat.split(',')
+  if (lnglat.length !== 2) return
+  
+  state.longitude = lnglat[0]
+  state.latitude = lnglat[1]
+  
+  // 通知父组件位置变更
+  emits('locateChange', lnglat)
+  emits('update:center', lonLat)
+  
+  // 设置标记并获取地址
+  setMarker(lnglat)
+  getAddress(lnglat)
+}
+
+/**
+ * 根据经纬度获取地址信息
+ * @param lnglat 经纬度数组
+ */
+const getAddress = (lnglat: any) => {
+  const point = new window.BMap.Point(lnglat[0], lnglat[1])
+  
+  state.geocoder.getLocation(point, (result: any) => {
+    if (result && result.address) {
+      state.address = result.address
     }
   })
 }
@@ -188,7 +238,6 @@ defineExpose({ regeoCode })
 onMounted(() => {
   loadMap()
 })
-// TODO @AI：style 可以改成 unocss 么？
 </script>
 
 <style scoped>
@@ -196,4 +245,4 @@ onMounted(() => {
   width: 100%;
   height: 400px;
 }
-</style>
+</style>
\ No newline at end of file
-- 
Gitee


From ea3fa161ec020dec9ca01ac62decce0f3ed0ece0 Mon Sep 17 00:00:00 2001
From: alwayssuper <191763414@qq.com>
Date: Sat, 19 Jul 2025 16:55:10 +0800
Subject: [PATCH 3/5] feat:map2

---
 src/components/Map/index.vue | 78 +++++++++++++++++++++---------------
 1 file changed, 46 insertions(+), 32 deletions(-)

diff --git a/src/components/Map/index.vue b/src/components/Map/index.vue
index 6cb55d73e..fc7287a7c 100644
--- a/src/components/Map/index.vue
+++ b/src/components/Map/index.vue
@@ -1,4 +1,4 @@
-<!-- 地图组件：基于百度地图实现 -->
+<!-- 地图组件：基于百度地图GL实现 -->
 <template>
   <div v-if="props.isWrite">
     <el-form ref="form" label-width="120px">
@@ -40,6 +40,14 @@
 import { reactive, ref, onMounted } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 
+// 扩展Window接口以包含百度地图GL API
+declare global {
+  interface Window {
+    BMapGL: any
+    initBaiduMap: () => void
+  }
+}
+
 const emits = defineEmits(['locateChange', 'update:center'])
 const state = reactive({
   lonLat: '', // 经度,纬度
@@ -68,26 +76,31 @@ const loadMap = () => {
   state.address = ''
   state.latitude = ''
   state.longitude = ''
-  
+
   // 创建百度地图API脚本
   const script = document.createElement('script')
-  script.src = `https://api.map.baidu.com/api?v=3.0&ak=${import.meta.env.VITE_BAIDU_MAP_KEY}&callback=initBaiduMap`
+  script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${
+    import.meta.env.VITE_BAIDU_MAP_KEY
+  }&callback=initBaiduMap`
   document.body.appendChild(script)
-  
+
   // 定义全局回调函数
   window.initBaiduMap = () => {
     initMap()
     initGeocoder()
     initAutoComplete()
-    
+
     if (props.clickMap) {
       state.map.addEventListener('click', (e: any) => {
-        const point = e.point
+        console.log(e)
+        const point = e.latlng
+        console.log(point)
         state.lonLat = point.lng + ',' + point.lat
+        console.log(state.lonLat)
         regeoCode(state.lonLat)
       })
     }
-    
+
     if (props.center) {
       regeoCode(props.center)
     }
@@ -99,29 +112,30 @@ const loadMap = () => {
  */
 const initMap = () => {
   const mapId = 'bdMap'
-  state.map = new window.BMap.Map(mapId)
-  state.map.centerAndZoom(new window.BMap.Point(116.404, 39.915), 11)
+  state.map = new window.BMapGL.Map(mapId)
+  state.map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 11)
   state.map.enableScrollWheelZoom()
   state.map.disableDoubleClickZoom()
-  
+
   // 添加地图控件
-  state.map.addControl(new window.BMap.NavigationControl())
-  state.map.addControl(new window.BMap.ScaleControl())
+  state.map.addControl(new window.BMapGL.NavigationControl())
+  state.map.addControl(new window.BMapGL.ScaleControl())
+  state.map.addControl(new window.BMapGL.ZoomControl())
 }
 
 /**
  * 初始化地理编码器
  */
 const initGeocoder = () => {
-  state.geocoder = new window.BMap.Geocoder()
+  state.geocoder = new window.BMapGL.Geocoder()
 }
 
 /**
  * 初始化自动完成
  */
 const initAutoComplete = () => {
-  state.autoComplete = new window.BMap.Autocomplete({
-    input: "searchInput",
+  state.autoComplete = new window.BMapGL.Autocomplete({
+    input: 'searchInput',
     location: state.map
   })
 }
@@ -135,15 +149,15 @@ const autoSearch = (queryValue: string) => {
     state.mapAddrOptions = []
     return
   }
-  
+
   state.loading = true
-  
+
   // 使用百度地图地点检索服务
-  const localSearch = new window.BMap.LocalSearch(state.map, {
+  const localSearch = new window.BMapGL.LocalSearch(state.map, {
     onSearchComplete: (results: any) => {
       state.loading = false
       const temp: any[] = []
-      
+
       if (results && results.getPoi) {
         const pois = results.getPoi()
         pois.forEach((p: any) => {
@@ -156,11 +170,11 @@ const autoSearch = (queryValue: string) => {
           }
         })
       }
-      
+
       state.mapAddrOptions = temp
     }
   })
-  
+
   localSearch.search(queryValue)
 }
 
@@ -180,17 +194,17 @@ const handleAddressSelect = (value: string) => {
  */
 const setMarker = (lnglat: any) => {
   if (!lnglat) return
-  
+
   // 如果点标记已存在则先移除原点
   if (state.mapMarker !== null) {
     state.map.removeOverlay(state.mapMarker)
     state.lonLat = ''
   }
-  
+
   // 创建新的标记点
-  const point = new window.BMap.Point(lnglat[0], lnglat[1])
-  state.mapMarker = new window.BMap.Marker(point)
-  
+  const point = new window.BMapGL.Point(lnglat[0], lnglat[1])
+  state.mapMarker = new window.BMapGL.Marker(point)
+
   // 添加点标记到地图
   state.map.addOverlay(state.mapMarker)
   state.map.centerAndZoom(point, 16)
@@ -202,17 +216,17 @@ const setMarker = (lnglat: any) => {
  */
 const regeoCode = (lonLat: string) => {
   if (!lonLat) return
-  
+
   const lnglat = lonLat.split(',')
   if (lnglat.length !== 2) return
-  
+
   state.longitude = lnglat[0]
   state.latitude = lnglat[1]
-  
+
   // 通知父组件位置变更
   emits('locateChange', lnglat)
   emits('update:center', lonLat)
-  
+
   // 设置标记并获取地址
   setMarker(lnglat)
   getAddress(lnglat)
@@ -223,8 +237,8 @@ const regeoCode = (lonLat: string) => {
  * @param lnglat 经纬度数组
  */
 const getAddress = (lnglat: any) => {
-  const point = new window.BMap.Point(lnglat[0], lnglat[1])
-  
+  const point = new window.BMapGL.Point(lnglat[0], lnglat[1])
+
   state.geocoder.getLocation(point, (result: any) => {
     if (result && result.address) {
       state.address = result.address
-- 
Gitee


From 46561f05a7f77043c50385efb6911bbec7b88a04 Mon Sep 17 00:00:00 2001
From: alwayssuper <191763414@qq.com>
Date: Sat, 19 Jul 2025 17:44:48 +0800
Subject: [PATCH 4/5] feat:baidumap

---
 .env                                       | 2 +-
 src/components/Map/index.vue               | 8 ++++++--
 src/views/iot/device/device/DeviceForm.vue | 4 ++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/.env b/.env
index 741e51ab9..e1024599d 100644
--- a/.env
+++ b/.env
@@ -24,5 +24,5 @@ VITE_APP_DEFAULT_LOGIN_TENANT = 芋道源码
 VITE_APP_DEFAULT_LOGIN_USERNAME = admin
 VITE_APP_DEFAULT_LOGIN_PASSWORD = admin123
 
-# 高德地图
+# 百度地图
 VITE_BAIDU_MAP_KEY = 'efHIw2qmH8RzHPxK0z0rbCgzDVLup9LD'
\ No newline at end of file
diff --git a/src/components/Map/index.vue b/src/components/Map/index.vue
index fc7287a7c..0386fafd7 100644
--- a/src/components/Map/index.vue
+++ b/src/components/Map/index.vue
@@ -227,7 +227,11 @@ const regeoCode = (lonLat: string) => {
   emits('locateChange', lnglat)
   emits('update:center', lonLat)
 
-  // 设置标记并获取地址
+  // 先将地图中心点设置到目标位置
+  const point = new window.BMapGL.Point(lnglat[0], lnglat[1])
+  state.map.centerAndZoom(point, 16)
+
+  // 再设置标记并获取地址
   setMarker(lnglat)
   getAddress(lnglat)
 }
@@ -246,7 +250,7 @@ const getAddress = (lnglat: any) => {
   })
 }
 
-// 显式暴露方法，使其可以被父组件访问
+/** 显式暴露方法，使其可以被父组件访问 */
 defineExpose({ regeoCode })
 
 onMounted(() => {
diff --git a/src/views/iot/device/device/DeviceForm.vue b/src/views/iot/device/device/DeviceForm.vue
index 5eb4b5ffc..ca3584b0e 100644
--- a/src/views/iot/device/device/DeviceForm.vue
+++ b/src/views/iot/device/device/DeviceForm.vue
@@ -93,14 +93,14 @@
                 @blur="updateLocationFromCoordinates"
               />
             </el-form-item>
-            <div class="pl-0 w-full ml-[-18px]" v-if="showMap">
+            <div class="pl-0 h-[400px] w-full ml-[-18px]" v-if="showMap">
               <Map
                 :isWrite="true"
                 :clickMap="true"
                 :center="formData.location"
                 @locateChange="handleLocationChange"
                 ref="mapRef"
-                class="h-[400px] w-full"
+                class="h-full w-full"
               />
             </div>
           </template>
-- 
Gitee


From f56f7ed68fc5564c9a710101fe03cc3660c916c6 Mon Sep 17 00:00:00 2001
From: alwayssuper <191763414@qq.com>
Date: Sat, 19 Jul 2025 17:47:02 +0800
Subject: [PATCH 5/5] feat:baidumap

---
 package-lock.json | 1 -
 package.json      | 1 -
 2 files changed, 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5fdb4b63f..ca57a5217 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
       "version": "2.5.0-snapshot",
       "license": "MIT",
       "dependencies": {
-        "@amap/amap-jsapi-loader": "^1.0.1",
         "@element-plus/icons-vue": "^2.1.0",
         "@form-create/designer": "^3.2.6",
         "@form-create/element-ui": "^3.2.11",
diff --git a/package.json b/package.json
index eeb59e508..43c851f57 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
     "lint:lint-staged": "lint-staged -c "
   },
   "dependencies": {
-    "@amap/amap-jsapi-loader": "^1.0.1",
     "@element-plus/icons-vue": "^2.1.0",
     "@form-create/designer": "^3.2.6",
     "@form-create/element-ui": "^3.2.11",
-- 
Gitee