6/24 统一地图组件入口，规范地图方法，属性。 完成天地图和高德切换

src/components/Map/GD.vue

@@ -2,6 +2,7 @@
 import AMapLoader from '@amap/amap-jsapi-loader';
 import { getVillageByIdAPI } from '@/api/system/community';
 import { onUnmounted, ref, watch, onMounted, nextTick } from 'vue';
+import { LngLat } from '@/components/Map/type';
 
 // 密钥配置
 const autoloader = import.meta.env.VITE_GCJ02_KEY_GD;
@@ -12,7 +13,7 @@ window._AMapSecurityConfig = { securityJsCode: VITE_GCJ02_JS_CODE_GD };
 const AMAP = ref<any>(null);
 const map = ref<any>(null);
 const mapReady = ref(false);
-const maploading = ref(false);
+const mapLoading = ref(false);
 const markers = ref<any[]>([]);
 const mouseTool = ref<any>(null);
 const AddMarkered = new Map<string, any>();
@@ -26,7 +27,7 @@ const props = defineProps({
   },
   clickOrDraw: {
     type: Boolean,
-    default: false
+    default: true
   },
   smallScroll: {
     type: Boolean,
@@ -34,7 +35,7 @@ const props = defineProps({
   }
 });
 const emits = defineEmits<{
-  clickPoint: [value: number[]];
+  clickPoint: [value: LngLat];
 }>();
 
 // 对外暴露方法
@@ -191,7 +192,7 @@ function initDrawTool() {
 }
 
 /** 获取路线坐标数组 */
-function getAllDrawLines(): number[][] {
+function getAllDrawLines(): LngLat[] | [] {
   if (!isMapAvailable() || drawnPolylines.length === 0) return [];
   const path = drawnPolylines[0].getPath();
   return path.map((p: any) => [p.lng, p.lat]);
@@ -257,7 +258,7 @@ function handleMap() {
 
 // ===================== 地图初始化 =====================
 onMounted(async () => {
-  maploading.value = true;
+  mapLoading.value = true;
   try {
     const AMap = await AMapLoader.load({
       key: autoloader,
@@ -266,10 +267,6 @@ onMounted(async () => {
     });
     AMAP.value = AMap;
 
-    // 获取村庄城市定位
-    const villageInfo = await getVillageByIdAPI(village);
-    const city = villageInfo.data.city.replaceAll('/', '');
-
     // 创建地图，全局关闭动画，解决移动缓慢
     map.value = new AMap.Map('GD-Map', {
       viewMode: '3D',
@@ -277,24 +274,33 @@ onMounted(async () => {
       center: [116.397428, 39.90923]
     });
 
-    // 城市地理编码定位
-    const geocoder = new AMap.Geocoder({ city });
-    geocoder.getLocation(city, (status: string, result: any) => {
-      if (status === 'complete' && result.info === 'OK') {
-        map.value.setCenter(result.geocodes[0].location.toArray());
-      }
-    });
+    try {
+      // 获取村庄城市定位
+      const villageInfo = await getVillageByIdAPI(village);
+      const city = villageInfo.data.city.replaceAll('/', '');
+      // 城市地理编码定位
+      const geocoder = new AMap.Geocoder({ city });
+      geocoder.getLocation(city, (status: string, result: any) => {
+        if (status === 'complete' && result.info === 'OK') {
+          map.value.setCenter(result.geocodes[0].location.toArray());
+        }
+      });
+    } catch (e) {
+      console.error(e);
+      map.value.setCenter([116.397428, 39.90923]);
+    }
 
     mapReady.value = true;
 
     // 禁用状态不开启绘制/点击
     if (!props.disabled) {
+      console.log(props.clickOrDraw);
       props.clickOrDraw ? handleMap() : MapDrawLine();
     }
   } catch (err) {
     console.error('高德地图加载失败', err);
   } finally {
-    maploading.value = false;
+    mapLoading.value = false;
   }
 });
 
@@ -319,7 +325,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div v-loading="maploading" class="map" id="GD-Map"></div>
+  <div v-loading="mapLoading" class="map" id="GD-Map"></div>
 </template>
 
 <style scoped lang="scss">