feat: 添加地图加载中的默认标题并优化标记创建

设置默认标题避免显示undefined，优化标记创建逻辑使其更清晰

feat: 添加地图加载中的默认标题并优化标记创建
设置默认标题避免显示undefined，优化标记创建逻辑使其更清晰
hookehuyr
Commit 21e9686b73d2726408308ba5e31f3f47bc815839 21e9686b 1 parent bd46f412
Showing 2 changed files with 20 additions and 10 deletions
index.html
src/views/checkin/map.vue
--- a/index.html
View file @21e9686
+++ b/index.html
View file @21e9686
 <!--
  * @Date: 2023-05-31 16:10:33
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-06 10:16:37
+ * @LastEditTime: 2025-09-18 09:49:26
  * @FilePath: /map-demo/index.html
  * @Description: 文件描述
 -->
@@ -11,7 +11,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
-  <title></title>
+  <title>地图加载中...</title>
   <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.css" /> -->
 </head>
 <body>
--- a/src/views/checkin/map.vue
View file @21e9686
+++ b/src/views/checkin/map.vue
View file @21e9686
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-08 10:46:16
+ * @LastEditTime: 2025-09-18 09:52:28
  * @FilePath: /map-demo/src/views/checkin/map.vue
  * @Description: 公众地图主体页面
 -->
@@ -189,6 +189,13 @@ export default {
      */
     mapHeight() {
       return this.isMiniProgramWebView ? 'calc(100vh - 80px)' : '100vh';
+    },
+    /**
+     * 获取地图缩放级别
+     * @returns {number} 地图缩放级别
+     */
+    zoom() {
+      return this.data_zoom;
     }
   },
   data() {
@@ -312,6 +319,9 @@ export default {
     }
   },
   async mounted() {
+    // 设置默认标题，避免显示undefined
+    document.title = '地图加载中...';
+
     const AMap = await AMapLoader.load({
       key: '17b8fc386104b89db88b60b049a6dbce', // 控制台获取
       version: '2.0', // 指定API版本
@@ -424,7 +434,7 @@ export default {
     createMarkerContent(entityInfo, textDirection, isSelected) {
       const iconUrl = entityInfo.icon || '';
       const name = entityInfo.name || '';
-      
+
       // 根据选中状态和文字方向选择样式
       let textStyle, containerStyle;
       if (textDirection === 'vertical') {
@@ -434,12 +444,12 @@ export default {
         textStyle = isSelected ? this.markerStyle2_horizontal : this.markerStyle1_horizontal;
         containerStyle = 'flex-direction: row; align-items: center;';
       }
-      
+
       // 将样式对象转换为CSS字符串
       const textStyleStr = Object.entries(textStyle)
         .map(([key, value]) => `${key}: ${value}`)
         .join('; ');
-      
+
       // 创建HTML内容
       const html = `
         <div style="display: flex; ${containerStyle} cursor: pointer;">
@@ -447,7 +457,7 @@ export default {
           <div style="${textStyleStr}">${name}</div>
         </div>
       `;
-      
+
       return html;
     },
     initMap() {
@@ -498,10 +508,10 @@ export default {
           marker_icon = entity_info[i].icon;
         }
         let text_direction = entity_info[i]?.writing_mode === 'vertical' ? 'vertical' : 'horizontal';
-        
+
         // 创建自定义HTML内容，包含图标和文字
         const markerContent = this.createMarkerContent(entity_info[i], text_direction, false);
-        
+
         let textMarker = new AMap.Marker({
           zooms: this.data_zooms, // 点标记显示的层级范围，使用地图配置的缩放范围
           content: markerContent, // 自定义HTML内容
@@ -526,7 +536,7 @@ export default {
               }
             }
           });
-          
+
           // 设置当前标记为选中状态
           const newContent = this.createMarkerContent(entity_info[i], text_direction, true);
           textMarker.setContent(newContent);