样式和定位调整

hookehuyr
Commit 83507edb61a48cdd098ddea9fb5727cb51c2e060 83507edb 1 parent 9031486a
Showing 4 changed files with 57 additions and 24 deletions
src/common/tiantan_v2.js
src/components/InfoWindow.vue
src/components/InfoWindowLite.vue
src/views/index.vue
--- a/src/common/tiantan_v2.js
View file @83507ed
+++ b/src/common/tiantan_v2.js
View file @83507ed
@@ -107,7 +107,7 @@
 var spotInfo = [
   {
     name: '照壁',
-    position: [120.587882, 31.312914],
+    position: [120.587882, 31.312884],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
     details: [
       {
@@ -117,6 +117,7 @@ var spotInfo = [
       },
     ],
     // zoom: { 17: 0, 18: 0, 19: 0, 20: 0 },
+    window_type: 'normal',
   },
   {
     name: '福德智慧二桥',
@@ -130,10 +131,11 @@ var spotInfo = [
       },
     ],
     // zoom: { 17: 1, 18: 1, 19: 0, 20: 0 },
+    window_type: 'normal',
   },
   {
     name: '御赐牌楼',
-    position: [120.587823, 31.313296],
+    position: [120.587823, 31.313276],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
     details: [
       {
@@ -143,10 +145,11 @@ var spotInfo = [
       },
     ],
     // zoom: { 17: 0, 18: 0, 19: 0, 20: 0 },
+    window_type: 'normal',
   },
   {
     name: '山门殿',
-    position: [120.587811, 31.313528],
+    position: [120.587811, 31.313508],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
     details: [
       {
@@ -156,10 +159,11 @@ var spotInfo = [
       },
     ],
     // zoom: { 17: 1, 18: 1, 19: 1, 20: 0 },
+    window_type: 'normal',
   },
   {
     name: '钟楼',
-    position: [120.587987, 31.31413],
+    position: [120.587985, 31.31411],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
     details: [
       {
@@ -168,10 +172,11 @@ var spotInfo = [
         url: 'https://mp.weixin.qq.com/s/bBwxIpK8L1h7JqENxMg6dg',
       },
     ],
+    window_type: 'normal',
   },
   {
     name: '鼓楼',
-    position: [120.58751, 31.314075],
+    position: [120.5875, 31.31407],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
     details: [
       {
@@ -180,10 +185,11 @@ var spotInfo = [
         url: 'https://mp.weixin.qq.com/s/bBwxIpK8L1h7JqENxMg6dg',
       },
     ],
+    window_type: 'normal',
   },
   {
     name: '天王殿',
-    position: [120.587699, 31.314548],
+    position: [120.58769, 31.314535],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
     details: [
       {
@@ -203,6 +209,7 @@ var spotInfo = [
         url: 'https://mp.weixin.qq.com/s/7t_jrhWGCCotx2erQNK2Mw',
       },
     ],
+    window_type: 'normal',
   },
   {
     name: '大雄宝殿',
@@ -230,6 +237,7 @@ var spotInfo = [
         url: 'https://mp.weixin.qq.com/s/WkEwZwXa0mEPzKCBohhY2Q',
       },
     ],
+    window_type: 'normal',
   },
   {
     name: '罗汉堂',
@@ -262,6 +270,7 @@ var spotInfo = [
         url: 'https://mp.weixin.qq.com/s/OwqYLL61YplHYPCvHdXakg',
       },
     ],
+    window_type: 'normal',
   },
   {
     name: '观音殿',
@@ -275,6 +284,7 @@ var spotInfo = [
         audio: '',
       },
     ],
+    window_type: 'normal',
   },
   {
     name: '藏经楼',
@@ -287,10 +297,11 @@ var spotInfo = [
         url: '',
       },
     ],
+    window_type: 'normal',
   },
   {
     name: '西花园湖心亭',
-    position: [120.586538, 31.315118],
+    position: [120.58653, 31.315118],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
     details: [
       {
@@ -299,10 +310,11 @@ var spotInfo = [
         url: 'https://www.jcedu.org/202012/17340.html',
       },
     ],
+    window_type: 'normal',
   },
   {
     name: '四百岁神龟',
-    position: [120.586107, 31.315011],
+    position: [120.586157, 31.315011],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
     details: [
       {
@@ -311,13 +323,14 @@ var spotInfo = [
         url: 'https://www.jcedu.org/202012/17293.html',
       },
     ],
+    window_type: 'normal',
   },
 ];
 var toiletInfo = [
   {
     name: '卫生间',
-    position: [120.587063, 31.314234],
+    position: [120.587103, 31.314234],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%8E%95%E6%89%80@2x.png',
     details: [
       {
@@ -326,6 +339,7 @@ var toiletInfo = [
         url: '',
       },
     ],
+    window_type: 'lite',
   },
 ];
@@ -341,13 +355,14 @@ var warnInfo = [
         url: '',
       },
     ],
+    window_type: 'lite',
   },
 ];
 var activityInfo = [
   {
     name: '素食馆',
-    position: [120.587152, 31.314396],
+    position: [120.587352, 31.314496],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE@2x.png',
     details: [
       {
@@ -356,10 +371,11 @@ var activityInfo = [
         url: '',
       },
     ],
+    window_type: 'lite',
   },
   {
     name: '包子铺',
-    position: [120.586812, 31.314195],
+    position: [120.586912, 31.314195],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
     details: [
       {
@@ -368,10 +384,11 @@ var activityInfo = [
         url: '',
       },
     ],
+    window_type: 'lite',
   },
   {
     name: '开水房',
-    position: [120.586752, 31.314069],
+    position: [120.586812, 31.314049],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
     details: [
       {
@@ -380,10 +397,11 @@ var activityInfo = [
         url: '',
       },
     ],
+    window_type: 'lite',
   },
   {
     name: '茶室',
-    position: [120.5868, 31.314981],
+    position: [120.58681, 31.314981],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
     details: [
       {
@@ -392,13 +410,14 @@ var activityInfo = [
         url: '',
       },
     ],
+    window_type: 'lite',
   },
 ];
 const publicInfo = [
   {
     name: '南门',
-    position: [120.587788, 31.313383],
+    position: [120.587811, 31.313508],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%87%BA%E5%85%A5%E5%8F%A3@2x.png',
     details: [
       {
@@ -407,10 +426,11 @@ const publicInfo = [
         url: '',
       },
     ],
+    window_type: 'lite',
   },
   {
     name: '东门',
-    position: [120.588272, 31.31421],
+    position: [120.588272, 31.31435],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%87%BA%E5%85%A5%E5%8F%A3@2x.png',
     details: [
       {
@@ -419,6 +439,7 @@ const publicInfo = [
         url: '',
       },
     ],
+    window_type: 'lite',
   },
 ];
--- a/src/components/InfoWindow.vue
View file @83507ed
+++ b/src/components/InfoWindow.vue
View file @83507ed
@@ -392,11 +392,11 @@ export default {
   }
 }
-.leaflet-popup-tip-container {
+.leaflet-popup-tip-container { // 信息框箭头样式
   margin-top: -1px;
   width: 2rem;
   height: 2rem;
-  margin-left: -20px;
+  margin-left: -10px;
   overflow: hidden;
   pointer-events: none;
 }
--- a/src/components/InfoWindowLite.vue
View file @83507ed
+++ b/src/components/InfoWindowLite.vue
View file @83507ed
@@ -13,7 +13,7 @@
           </div>
       </div>
       <div class="van-hairline--top" style="margin: 1rem 0;">
-        <div style="width: 100%; float: left; text-align: center; margin-top: 1rem;">
+        <div @click="goToLocation()"  style="width: 100%; float: left; text-align: center; margin-top: 1rem;">
           <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.5rem" color="#FFF"
             style="vertical-align: bottom;" />&nbsp;
           <span style="color: #AB8F57; font-size: 1.1rem;">前往</span>
@@ -96,6 +96,9 @@ export default {
     goTo(url) {
       location.href = this.info.details[this.isActive].url;
     },
+    goToLocation() {
+      this.$emit('onLocation', this.info.position)
+    }
   }
 }
 </script>
@@ -241,7 +244,7 @@ export default {
   margin-top: -1px;
   width: 2rem;
   height: 2rem;
-  margin-left: -20px;
+  margin-left: -10px;
   overflow: hidden;
   pointer-events: none;
 }
--- a/src/views/index.vue
View file @83507ed
+++ b/src/views/index.vue
View file @83507ed
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-06-26 15:10:06
+ * @LastEditTime: 2023-06-27 11:28:41
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 地图主体页面
 -->
@@ -27,7 +27,7 @@
       <van-popup v-model:show="show_nav_popup" position="bottom" duration="0" :overlay="false"
         :style="{ padding: '1rem', bottom: '4.5rem' }">
         <div style="text-align: left;">
-          <div v-for="(item, index) in navList[navName]" :key="index" @click="positionMarker(item)"
+          <div v-for="(item, index) in navList[navName]" :key="index" @click="handleNavMarker(item)"
             style="margin-bottom: 1rem; font-size: 1.15rem;">
             <van-icon name="fire-o" color="#965f13" />&nbsp;&nbsp;<span style="color: #000;">{{ item.name }}</span>
           </div>
@@ -77,7 +77,7 @@
     <InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :info="itemInfo" :rect="rect"
       @onLocation="infoWindowLocation"></InfoWindow>
     <InfoWindowLite v-show="showInfoWindowLite" ref="infoWindowLite" :info-window="infoWindowLite" :info="itemInfo"
-      :rect="rect"></InfoWindowLite>
+      :rect="rect" @onLocation="infoWindowLocation"></InfoWindowLite>
     <InfoWindowWarn v-show="showInfoWindowWarn" ref="infoWindowWarn" :info-window="infoWindowWarn" :info="itemInfo"
       :rect="rect"></InfoWindowWarn>
@@ -324,8 +324,9 @@ export default {
             },
             label: {
               content: coord.spotInfo[i].name,
-              position: 'BM',
+              position: 'TM',
-              offset: new AMap.Pixel(0, 10),
+              // position: 'BM',
+              // offset: new AMap.Pixel(0, 10),
               minZoom: 18
             }
           }, {
@@ -806,6 +807,7 @@ export default {
       this.show_walk_route = true;
     },
     infoWindowLocation(position) { // 监听前往按钮回调
+      // TODO: 实际获取精确定位后导航到位置
       // // 判断是否在范围内
       // if (!this.isPointInRing()) {
       //   this.dialog_show = true;
@@ -857,6 +859,13 @@ export default {
     handleNavPopup() {
       this.show_nav_popup = !this.show_nav_popup
     },
+    handleNavMarker (item) { // 底部列表点击跳转弹框判断
+      if (item.window_type === 'normal') {
+        this.positionMarker(item)
+      } else {
+        this.positionLiteMarker(item)
+      }
+    },
     positionMarker(item) {
       // 点击后创建自定义信息窗口
       this.setInfoWindows(item)