地图标记显示样式调整，浮动框效果调整

hookehuyr
Commit 10415a3ef047d96315257526be1c8c3bb7c8bb86 10415a3e 1 parent 883a13b7
Showing 2 changed files with 38 additions and 19 deletions
src/views/bieyuan/info.vue
src/views/bieyuan/map.vue
--- a/src/views/bieyuan/info.vue
View file @10415a3
+++ b/src/views/bieyuan/info.vue
View file @10415a3
 <!--
  * @Date: 2024-09-15 22:08:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-18 17:25:26
+ * @LastEditTime: 2024-09-19 11:02:19
  * @FilePath: /map-demo/src/views/bieyuan/info.vue
  * @Description: 文件描述
 -->
@@ -11,7 +11,7 @@
       <van-config-provider :theme-vars="themeVars">
         <van-swipe class="my-swipe" indicator-color="#DD7850" lazy-render :autoplay="5000">
           <van-swipe-item v-for="image in images" :key="image">
-            <van-image fit="cover" width="100%" height="15rem" :src="image" />
+            <van-image fit="cover" width="100%" height="13rem" :src="image" />
           </van-swipe-item>
         </van-swipe>
       </van-config-provider>
@@ -22,7 +22,7 @@
           <p class="info-title">选佛场</p>
           <p class="info-sub-title">南楼2层</p>
         </div>
-        <div class="info-btn">前往</div>
+        <div @click="goTo()" class="info-btn">前往</div>
       </div>
       <div class="van-hairline--bottom">
         <van-tabs v-model:active="active" color="#DD7850" title-active-color="#DD7850" sticky>
@@ -131,6 +131,16 @@ const outerStopAudio = () => {
   audio.value.pause();
 }
+const emit = defineEmits(["closeFloat"]);
+const goTo = () => { // 打开标记地图显示
+  if ($router.currentRoute.value.path === '/bieyuan/info') { // 详情页
+
+  } else { // 地图页
+    //
+    emit("closeFloat", false);
+  }
+}
+
 defineExpose({
   outerStopAudio
 })
--- a/src/views/bieyuan/map.vue
View file @10415a3
+++ b/src/views/bieyuan/map.vue
View file @10415a3
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-18 18:39:01
+ * @LastEditTime: 2024-09-19 11:02:47
  * @FilePath: /map-demo/src/views/bieyuan/map.vue
  * @Description: 公众地图主体页面
 -->
@@ -42,10 +42,10 @@
             <button @click="show = false">关闭</button>
           </div>
         </template> -->
-        <page-info ref="pageInfo"></page-info>
+        <page-info ref="pageInfo" @close-float="onCloseFloat"></page-info>
-        <div v-if="showClose" @click="closeFloatPanel" class="close-float-panel">
+        <!-- <div v-if="showClose" @click="closeFloatPanel" class="close-float-panel">
           <van-icon name="arrow-left" color="#FFF" size="1.5rem" />
-        </div>
+        </div> -->
       </van-floating-panel>
     </van-config-provider>
   </div>
@@ -143,43 +143,43 @@ export default {
       data_paths: {}, // 接口获取-地图导航路径
       data_path_list: [], // 接口获取-地图导航路径
       info_height: 0,
-      anchors: [0,  (0.5 * window.innerHeight),  (1 * window.innerHeight)],
+      anchors: [0,  (0.45 * window.innerHeight),  (1 * window.innerHeight)],
       themeVars: {
         floatingPanelHeaderHeight: 0,
         floatingPanelBorderRadius: '1.25rem'
       },
       showClose: false,
-      markerStyle1: { // 未选中
+      markerStyle1: { // 选中
         //设置文本样式，Object 同 css 样式表
         "padding": ".5rem .2rem .5rem .2rem",
         // "margin-bottom": "1rem",
+        "border-color": "#DD7850",
         "border-radius": ".25rem",
-        "background-color": "#DD7850",
+        "background-color": "#FFF",
         // "width": "1rem",
         // "border-width": 0,
         // "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
         // "text-align": "center",
         "font-size": "0.8rem",
-        "color": "white",
+        "color": "#DD7850",
         "writing-mode": "vertical-rl",
         "text-orientation": "mixed",
         "display": "flex",
         "justify-content": "center",
         "align-items": "center",
       },
-      markerStyle2: { // 选中
+      markerStyle2: { // 未选中
         //设置文本样式，Object 同 css 样式表
         "padding": ".5rem .2rem .5rem .2rem",
         // "margin-bottom": "1rem",
-        "border-color": "#DD7850",
         "border-radius": ".25rem",
-        "background-color": "#FFF",
+        "background-color": "#DD7850",
         // "width": "1rem",
         // "border-width": 0,
         // "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
         // "text-align": "center",
         "font-size": "0.8rem",
-        "color": "#DD7850",
+        "color": "white",
         "writing-mode": "vertical-rl",
         "text-orientation": "mixed",
         "display": "flex",
@@ -314,10 +314,13 @@ export default {
             this.itemInfo = entity_info[i];
             // 打开浮动面板
-            this.info_height = (0.5 * window.innerHeight);
+            this.info_height = (0.45 * window.innerHeight);
             // 浮动面板样式
             $('.van-floating-panel__content').css('borderRadius', '1.25rem');
             $('.van-floating-panel').css('boxShadow', '0 0 15px black');
+
+            // 定位到当前位置中心
+            this.map.setZoomAndCenter(this.zoom, this.itemInfo.position);
           })
         }
       });
@@ -570,11 +573,11 @@ export default {
         e.lnglat.getLat() +
         "],"
       console.log(text);
-      // 关闭浮动面板
+      /*// 关闭浮动面板
       this.info_height = 0;
       $('.van-floating-panel').css('boxShadow', 'none');
       // 还原样式
-      this.resetMarkStyle();
+      this.resetMarkStyle();*/
     },
     scanQrcode() {
       wx.scanQRCode({
@@ -604,7 +607,7 @@ export default {
       }
     },
     closeFloatPanel () {
-      this.info_height = (0.5 * window.innerHeight);
+      this.info_height = (0.45 * window.innerHeight);
       $('.van-floating-panel__content').css('borderRadius', '1.25rem');
       this.showClose = false;
       // 关闭音频
@@ -614,6 +617,12 @@ export default {
       this.markerSum.forEach(item => {
         item.setStyle(this.markerStyle1);
       })
+    },
+    onCloseFloat () {
+      this.info_height = 0;
+      $('.van-floating-panel__content').css('borderRadius', '1.25rem');
+      $('.van-floating-panel').css('boxShadow', 'none');
+      this.resetMarkStyle();
     }
   }
 }