建筑景点样式调整

hookehuyr
Commit 11e5ddb3e42e268d1fb92a7abf0cd085db0c2c27 11e5ddb3 1 parent eb9362e8
Showing 4 changed files with 489 additions and 177 deletions
components.d.ts
src/common/tiantan_v2.js
src/components/InfoWindow.vue
src/views/index.vue
--- a/components.d.ts
View file @11e5ddb
+++ b/components.d.ts
View file @11e5ddb
@@ -12,8 +12,12 @@ declare module '@vue/runtime-core' {
     InfoWindow: typeof import('./src/components/InfoWindow.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    VanCol: typeof import('vant/es')['Col']
     VanDialog: typeof import('vant/es')['Dialog']
     VanIcon: typeof import('vant/es')['Icon']
     VanPopup: typeof import('vant/es')['Popup']
+    VanRow: typeof import('vant/es')['Row']
+    VanTab: typeof import('vant/es')['Tab']
+    VanTabs: typeof import('vant/es')['Tabs']
   }
 }
--- a/src/common/tiantan_v2.js
View file @11e5ddb
+++ b/src/common/tiantan_v2.js
View file @11e5ddb
-var sheshi = [{
+// var sheshi = [
-  name: '停车场',
+//   {
-  position: [116.418563, 39.883041],
+//     name: '停车场',
-  icon: 'https://a.amap.com/jsapi_demos/static/resource/img/停车场.png'
+//     position: [116.418563, 39.883041],
-}, {
+//     icon: 'https://a.amap.com/jsapi_demos/static/resource/img/停车场.png',
-  name: '洗手间',
+//   },
-  position: [116.415419, 39.883125],
+//   {
-  icon: 'https://a.amap.com/jsapi_demos/static/resource/img/洗手间.png'
+//     name: '洗手间',
-}, {
+//     position: [116.415419, 39.883125],
-  name: '洗手间',
+//     icon: 'https://a.amap.com/jsapi_demos/static/resource/img/洗手间.png',
-  position: [116.410226, 39.88364],
+//   },
-  icon: 'https://a.amap.com/jsapi_demos/static/resource/img/洗手间.png'
+//   {
-}, {
+//     name: '洗手间',
-  name: '洗手间',
+//     position: [116.410226, 39.88364],
-  position: [116.412247, 39.887258],
+//     icon: 'https://a.amap.com/jsapi_demos/static/resource/img/洗手间.png',
-  icon: 'https://a.amap.com/jsapi_demos/static/resource/img/洗手间.png'
+//   },
-}, {
+//   {
-  name: '洗手间',
+//     name: '洗手间',
-  position: [116.412701, 39.874841],
+//     position: [116.412247, 39.887258],
-  icon: 'https://a.amap.com/jsapi_demos/static/resource/img/洗手间.png'
+//     icon: 'https://a.amap.com/jsapi_demos/static/resource/img/洗手间.png',
-}, {
+//   },
-  name: '售票处',
+//   {
-  position: [116.412442, 39.887925],
+//     name: '洗手间',
-  icon: 'https://a.amap.com/jsapi_demos/static/resource/img/门票.png'
+//     position: [116.412701, 39.874841],
-}, {
+//     icon: 'https://a.amap.com/jsapi_demos/static/resource/img/洗手间.png',
-  name: '售票处',
+//   },
-  position: [116.413039, 39.874522],
+//   {
-  icon: 'https://a.amap.com/jsapi_demos/static/resource/img/门票.png'
+//     name: '售票处',
-}]
+//     position: [116.412442, 39.887925],
+//     icon: 'https://a.amap.com/jsapi_demos/static/resource/img/门票.png',
+//   },
+//   {
+//     name: '售票处',
+//     position: [116.413039, 39.874522],
+//     icon: 'https://a.amap.com/jsapi_demos/static/resource/img/门票.png',
+//   },
+// ];
-var touristSpots = [{
+// var touristSpots = [
-  name: '祈年殿',
+//   {
-  position: [116.412866, 39.88365],
+//     name: '祈年殿',
-  zIndex: 300,
+//     position: [116.412866, 39.88365],
-  smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/故宫.png',
+//     zIndex: 300,
-  bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/qiniandian.png',
+//     smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/故宫.png',
-  size: [128, 160],
+//     bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/qiniandian.png',
-  anchor: 'bottom-center',
+//     size: [128, 160],
-  minZoom: 19
+//     anchor: 'bottom-center',
-}, {
+//     minZoom: 19,
-  name: '西天门',
+//   },
-  position: [116.405562, 39.881166],
+//   {
-  smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/门.png',
+//     name: '西天门',
-  bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men.png',
+//     position: [116.405562, 39.881166],
-  size: [146, 144],
+//     smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/门.png',
-  anchor: 'bottom-center',
+//     bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men.png',
-  minZoom: 18
+//     size: [146, 144],
-}, {
+//     anchor: 'bottom-center',
-  name: '北天门',
+//     minZoom: 18,
-  position: [116.412745, 39.885776],
+//   },
-  smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/门.png',
+//   {
-  bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men2.png',
+//     name: '北天门',
-  size: [185, 94],
+//     position: [116.412745, 39.885776],
-  anchor: 'bottom-center',
+//     smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/门.png',
-  minZoom: 17
+//     bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men2.png',
-}, {
+//     size: [185, 94],
-  name: '百花园',
+//     anchor: 'bottom-center',
-  position: [116.40783, 39.88212],
+//     minZoom: 17,
-  zIndex: 200,
+//   },
-  smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/盆景02.png',
+//   {
-  bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men3.png',
+//     name: '百花园',
-  size: [210, 98],
+//     position: [116.40783, 39.88212],
-  anchor: 'bottom-center',
+//     zIndex: 200,
-  minZoom: 16
+//     smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/盆景02.png',
-}, {
+//     bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men3.png',
-  name: '万寿亭',
+//     size: [210, 98],
-  position: [116.406792, 39.8837],
+//     anchor: 'bottom-center',
-  smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/景点.png',
+//     minZoom: 16,
-  bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/tingzi.png',
+//   },
-  size: [128, 168],
+//   {
-  anchor: 'bottom-center',
+//     name: '万寿亭',
-  minZoom: 15
+//     position: [116.406792, 39.8837],
-}, {
+//     smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/景点.png',
-  name: '圜丘',
+//     bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/tingzi.png',
-  position: [116.413219, 39.876967],
+//     size: [128, 168],
-  smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/景点.png',
+//     anchor: 'bottom-center',
-  bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men4.png',
+//     minZoom: 15,
-  size: [148, 137],
+//   },
-  anchor: 'bottom-center',
+//   {
-  minZoom: 15
+//     name: '圜丘',
-}, {
+//     position: [116.413219, 39.876967],
-  name: '东天门',
+//     smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/景点.png',
-  position: [116.417604, 39.881557],
+//     bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men4.png',
-  smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/门.png',
+//     size: [148, 137],
-  bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men2.png',
+//     anchor: 'bottom-center',
-  size: [185, 94],
+//     minZoom: 15,
-  anchor: 'bottom-center',
+//   },
-  minZoom: 15
+//   {
-}];
+//     name: '东天门',
+//     position: [116.417604, 39.881557],
+//     smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/门.png',
+//     bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men2.png',
+//     size: [185, 94],
+//     anchor: 'bottom-center',
+//     minZoom: 15,
+//   },
+// ];
 var spotInfo = [
   {
-    name: '三宝楼',
+    name: '照壁',
-    position: [120.587436, 31.316177],
+    position: [120.58783, 31.313136],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
+    details: [
+      {
+        name: '照壁',
+        note: '完善和谐的道场是从照壁开始的。修建、落成于2005年的照壁矗立在枫桥路上塘河边，黄墙黛瓦、双龙盘绕，犹如西园的屏障，正面写着“戒幢律寺”四个大字，告诉你，一个以戒为本、以律为宗的律宗道场到了。在照壁的另一面，写着“自觉觉他”，这是原中国佛教协会副会长茗山长老的墨宝。这四个字提醒我们，佛是觉悟的意思，走进佛门、学习佛法，不仅要自己觉悟，还要帮助他人，乃至引领一切众生走向觉悟，从无尽的烦恼与痛苦中解脱出来。',
+        url: 'https://mp.weixin.qq.com/s/foNpXIQ6LkPVI195EAL5UQ',
+      },
+    ],
+    // zoom: { 17: 0, 18: 0, 19: 0, 20: 0 },
   },
   {
-    name: '法云堂',
+    name: '福德智慧二桥',
-    position: [120.587884, 31.3152],
+    position: [120.588151, 31.313239],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
+    details: [
+      {
+        name: '福德智慧二桥',
+        note: '完善和谐的道场是从照壁开始的。修建、落成于2005年的照壁矗立在枫桥路上塘河边，黄墙黛瓦、双龙盘绕，犹如西园的屏障，正面写着“戒幢律寺”四个大字，告诉你，一个以戒为本、以律为宗的律宗道场到了。在照壁的另一面，写着“自觉觉他”，这是原中国佛教协会副会长茗山长老的墨宝。这四个字提醒我们，佛是觉悟的意思，走进佛门、学习佛法，不仅要自己觉悟，还要帮助他人，乃至引领一切众生走向觉悟，从无尽的烦恼与痛苦中解脱出来。',
+        url: 'https://mp.weixin.qq.com/s/foNpXIQ6LkPVI195EAL5UQ',
+      },
+    ],
+    // zoom: { 17: 1, 18: 1, 19: 0, 20: 0 },
   },
   {
-    name: '罗汉堂',
+    name: '御赐牌楼',
-    position: [120.587581, 31.31505],
+    position: [120.58779, 31.313379],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
-    note: `与观音殿遥相呼应的是罗汉堂，位于大雄宝殿西侧。西园寺罗汉堂为中国四大古罗汉堂之一。
+    details: [
-
+      {
-    西园罗汉堂创建于明末，咸丰时即倾颓于战火。现仅存第一进石拱门的圆框及左右门券石，雕刻精美，为明代遗物，历经岁月摩娑，光泽内敛。如今，我们只能从遗物的精美雕刻，遥想旧时沧桑及这一不复存在的胜迹。现有的罗汉堂，为同治、光绪年间陆续重葺。屋宇深广，共三进四十八间。整体建筑呈田字形布局，中心雕塑周围有小天井四座，给幽深曲折的殿堂提供了良好的通风和采光条件。
+        name: '牌坊',
-
+        note: '西园寺山门外的牌楼，始建于清朝光绪年间，四柱挺立，均为石质，柱下有埋头，前后有夹榫，坚固非凡。四柱隔成三门，中门高阔，左、右边门较低窄，既对称又有起伏，参差有致。上部为木枋楼，皆以单额枋上置平板枋，承斗拱托楼顶。正中置明楼，形状为单檐宫殿式顶。牌楼左右两侧为边楼，三楼楼顶戗角，翘起来高过屋脊，如展翅欲飞之势，煞是好看。西园寺山门的结构与气派，在江南亦不多见。',
-    从空中俯瞰，罗汉堂黛瓦覆顶，组成一个汉字的“田”字。象征在佛教里僧宝，是一切世间供养、布施、修福的无上福田，五百罗汉则是贤圣僧的代表。
+        url: 'https://mp.weixin.qq.com/s/PgQzpKmtKzb9feuKRuJIpg',
-
+      },
-
+    ],
-    除了俯瞰的“田”字，在罗汉堂地下，还有一项隐秘而巧妙的设计——西边放生池的水源经过罗汉堂地下隐秘水道弯曲绕行，流经罗汉堂，最终汇聚到大雄宝殿露台前的香花桥下。这不仅让西园寺内基础水池串联成一片活水，更重要和巧妙地解决了罗汉堂内的湿度调节问题。因五百罗汉为泥胎雕塑，过于干燥的空气将会造成古老的泥塑造像干裂、风化、剥落等一系列问题，而地下隐暗水道的设计，则有效保证罗汉堂内的湿度能控制在一定范围内。于此，不得不叹服先人的智慧。
+    // zoom: { 17: 0, 18: 0, 19: 0, 20: 0 },
-
+  },
-    罗汉堂原有的建筑较为低矮，不仅光线昏暗、空气浑浊，而且年深日久，梁柱有不同程度的老旧腐化。一九九七年七月，寺院对罗汉堂进行了全面整修，历时半年。在落架大修过程中，既遵照文物修旧如旧的原则，又以创新的精神，适应形势发展的需要，大胆将罗汉堂屋顶升高六十厘米，并加了斗拱，既利于文物的保护，又极大改善了罗汉堂采光环境，使整个罗汉堂显得美观大方，吸引了众多的信众前来瞻礼，使古寺焕发出崭新的光彩，成为名副其实的吴中胜地。`,
+  {
+    name: '山门殿',
+    position: [120.587801, 31.313267],
+    icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
+    details: [
+      {
+        name: '山门',
+        note: '山门殿与双桥、照壁均是在2003年至2005年新建的，自此，寺院也恢复了从正门（南门）进入的传统。',
+        url: 'https://mp.weixin.qq.com/s/XzSqtH5RPaRSAihQGZJ8hg',
+      },
+    ],
+    zoom: { 17: 1, 18: 1, 19: 0, 20: 0 },
+  },
+  {
+    name: '钟楼',
+    position: [120.588021, 31.313826],
+    icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
+    details: [
+      {
+        name: '钟楼',
+        note: '穿过山门 进入第一进院落 展现在眼前的是宽广的“菩提大道” 大道两侧绿树成荫 树下芳草碧绿青青 左右两侧的黄墙上 还有长长的宣传栏 介绍着佛教的一些基本常识 及寺院的发展情况 仔细阅读 会有意想不到的收获',
+        url: 'https://mp.weixin.qq.com/s/bBwxIpK8L1h7JqENxMg6dg',
+      },
+    ],
+  },
+  {
+    name: '鼓楼',
+    position: [120.587511, 31.31378],
+    icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
+    details: [
+      {
+        name: '鼓楼',
+        note: '穿过山门 进入第一进院落 展现在眼前的是宽广的“菩提大道” 大道两侧绿树成荫 树下芳草碧绿青青 左右两侧的黄墙上 还有长长的宣传栏 介绍着佛教的一些基本常识 及寺院的发展情况 仔细阅读 会有意想不到的收获',
+        url: 'https://mp.weixin.qq.com/s/bBwxIpK8L1h7JqENxMg6dg',
+      },
+    ],
+  },
+  {
+    name: '天王殿',
+    position: [120.587468, 31.314435],
+    icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
+    details: [
+      {
+        name: '弥勒菩萨',
+        note: '走过钟鼓楼，映入眼帘的是黄墙黛瓦、气势恢宏的天王殿。它坐北朝南，为重檐歇山建筑，顶势平坦，飞檐翘角，显得庄重肃穆，拱形山檐下高悬由赵朴老题写的“天王殿”匾额。',
+        url: 'https://mp.weixin.qq.com/s/LJh_8B7JQtTxz8Chq1EJSQ',
+        audio: 'https://file.365daoyou.cn/mimi-001_1505799708494-k3xkyzv8',
+      },
+      {
+        name: '韦陀菩萨',
+        note: '走到天王殿后门处 与大雄宝殿相对的便是韦陀菩萨 天王殿内弥勒菩萨面向山门 以慈悲相接引众生走入佛门 韦陀菩萨面向大雄宝殿 以威严相守护伽蓝护持佛法 韦陀菩萨 头戴凤翅兜鍪（móu）盔 足穿乌云皂履 身披黄金锁子甲 手持降魔杵 现将军形象',
+        url: 'https://mp.weixin.qq.com/s/ruG6rAb714nIrMc2IS_V_g',
+      },
+      {
+        name: '四大天王',
+        note: '天王殿内东西两侧是四尊高大的塑像，这就是四大天王，屋顶四角也分别塑有四天王的小身立像，上下呼应，气势威武。',
+        url: 'https://mp.weixin.qq.com/s/7t_jrhWGCCotx2erQNK2Mw',
+      },
+    ],
   },
   {
     name: '大雄宝殿',
     position: [120.587116, 31.314809],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
-    note: `大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。
+    details: [
-
+      {
-    大殿二重檐下，悬“大雄宝殿”四个遒劲有力的金字，气势雄浑，据说这四个字是陆润庠所提。陆润庠是苏州历史上第五十五位，也是最后一位状元，官至一品、大学士(即宰相级别)。大雄宝殿是佛教寺院中供奉佛像的正殿，是整座寺院的核心建筑，也是僧众朝暮集中修持的地方。因释迦牟尼佛德号“大雄”，所以称大雄宝殿。为什么叫大雄？大者，是包含万有的意思；雄者，是摄伏群魔的意思。释迦牟尼佛具足圆觉智慧，能雄镇大千世界，降伏四魔（烦恼魔、阴魔、死魔、自在天魔），因此尊称佛陀为大雄。
+        name: '大雄宝殿',
-
+        note: '大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。',
-    檐枋悬有三块匾额，中门之上为“西乾应迹”匾额。西者西方，乾者天也，西乾即是指佛教的发源地古印度，因当时地处中国的西方而得名，相应地，中国则被称为东土。应迹谓应化垂迹，即佛、菩萨应众生之机缘而将其本体示现种种身以济度众生。
+        url: 'https://mp.weixin.qq.com/s/jpG4kmRH6LiW67EuMmc3OA',
-
+      },
-    东门上为“焰网庄严”匾额，出处为《药师经》第二大愿：“身善能安住，焰网庄严，过于日月”,即所谓“药师如来琉璃光,焰网庄严无等伦”，形容的是东方药师佛世界；西门上为“光寿无量”匾额，是“无量寿、无量光”的意思，意指西方阿弥陀佛光寿无量。“三个匾额”与殿内供奉的“横世三佛”内外呼应。与“西乾应迹”相呼应的中间一尊佛像是释迦摩尼佛，大迦叶尊者与阿难尊者分立两侧；与“焰网庄严”相呼应的则是药师佛，位于东侧；与“光寿无量”相呼应的则是阿弥陀佛，位于西侧。几尊佛像均是香樟木雕刻，是现存不多的清时期极具代表性的大型木雕造像。三尊佛像下莲花座、金刚须弥座雕刻精美、令人叹为观止。
+      {
-
+        name: '智行菩萨',
-    大殿内有三副抱柱楹联，外侧上联为“东震涌庄严，看桥通鹤市，山近虎丘，招提久占三吴胜”；下联为“西来参本意，任侠士流芳，生公说法，照澈都归五蕴空”。“鹤市”，阖闾女亡，出殡时，鹤舞于阊门，后以鹤市代指阊门。“生公说法”，是指南北朝的高僧竺道生在虎丘山上说法，最后顽石也点头赞同的典故。后有题记：“乙丑（1925）春仲，郡人许人俊谨题”。
+        note: '西园戒幢律寺的罗汉堂，是中国四大罗汉堂之一。一进门，正中就是一尊四面千手千眼观音。 这尊金身立相的观音妙相庄严，身穿天衣，腰束飘巾，折式衣裙，犹如轻纱；头戴天冠，天冠中雕有化佛；胸前双手合十，其腰间双手置腹下作禅定印，肩上双手伸过冠顶，似托头顶放光化佛之状，其余两手持法器；身分四面，总具千手，掌心各刻一眼，以示千手千眼。',
-
+        url: 'https://mp.weixin.qq.com/s/GeFu3Ux-CcI_axsdeMbqJw',
-    内侧有两副，内外上联为“宝相瞻大雄，象法禅机垂正觉”；下联为“劳生来小息，鱼音梵呗涤尘烦”；“余姚黄雨斋撰立，江东浦泳谨书”。
+      },
-
+      {
-    内中上联为“海国启琳宫，宏法利生扬正教”；下联为“灵山闻妙谛，觉迷度苦感仁王”；“弟子夏士魁长发头陀敬献，江东浦泳谨书”。
+        name: '庄严主佛像',
-
+        note: '大雄宝殿内迎面是三尊高大的塑像：释迦如来居中，东面是药师如来，西面是阿弥陀如来。',
-    两副对联均作于民国三十三年（1944），其中“感仁王”三字年久剥落，1985年浦泳老先生重游西园寺，见字残缺，说“趁我有生之年，把字补好”。不久果寄来字样，重修时已把字补上，亦可告慰于浦老矣！`,
+        url: 'https://mp.weixin.qq.com/s/oMSBDmlo2fvHs2E1AukOQA',
+      },
+      {
+        name: '观音济群生',
+        note: '大雄宝殿后壁东有大智文殊菩萨，西有大行普贤菩萨，这是法身佛的胁侍菩萨。这两尊菩萨为香樟木涂金，典型的汉传清代式样造像，慈眉善目宁静庄严。此外，这两位菩萨和后影壁的南海观音（大悲观音菩萨）、及端坐大钟之下超拔恶道众生的大愿地藏菩萨，被尊为“悲智行愿”四大菩萨。',
+        url: 'https://mp.weixin.qq.com/s/WkEwZwXa0mEPzKCBohhY2Q',
+      },
+    ],
+  },
+  {
+    name: '罗汉堂',
+    position: [120.587581, 31.31505],
+    icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
+    details: [
+      {
+        name: '罗汉堂',
+        note: '与观音殿遥相呼应的是罗汉堂，位于大雄宝殿西侧。西园寺罗汉堂为中国四大古罗汉堂之一。 西园罗汉堂创建于明末，咸丰时即倾颓于战火。现仅存第一进石拱门的圆框及左右门券石，雕刻精美，为明代遗物，历经岁月摩娑，光泽内敛。如今，我们只能从遗物的精美雕刻，遥想旧时沧桑及这一不复存在的胜迹。现有的罗汉堂，为同治、光绪年间陆续重葺。屋宇深广，共三进四十八间。整体建筑呈田字形布局，中心雕塑周围有小天井四座，给幽深曲折的殿堂提供了良好的通风和采光条件。',
+        url: 'https://mp.weixin.qq.com/s/s5-uk-I-FDblNF4scMQHsg',
+      },
+      {
+        name: '千手观音',
+        note: '西园戒幢律寺的罗汉堂，是中国四大罗汉堂之一。一进门，正中就是一尊四面千手千眼观音。 这尊金身立相的观音妙相庄严，身穿天衣，腰束飘巾，折式衣裙，犹如轻纱；头戴天冠，天冠中雕有化佛；胸前双手合十，其腰间双手置腹下作禅定印，肩上双手伸过冠顶，似托头顶放光化佛之状，其余两手持法器；身分四面，总具千手，掌心各刻一眼，以示千手千眼。',
+        url: 'https://mp.weixin.qq.com/s/GeFu3Ux-CcI_axsdeMbqJw',
+      },
+      {
+        name: '众圣僧',
+        note: '罗汉堂中主要供奉的是五百罗汉。佛陀在世时已证得无学果之五百声闻弟子，这五百弟子即后世的五百罗汉。佛灭度后，以大迦叶为首的五百罗汉在王舍城结集法藏。 罗汉又称阿罗汉，是僧人精进修行，断尽一切烦恼，证得阿罗汉果位而受世间大供养的圣者。罗汉就是圣僧，所以罗汉像均现出家形像。我国从北宋以来有罗汉堂之设，一方面为僧人树立楷模，另一方面向世人展示：人人都有佛性，罗汉就是从实实在在的僧人修炼而成的。',
+        url: 'https://mp.weixin.qq.com/s/GJGA24G-fXI_ahPodjgR4Q',
+      },
+      {
+        name: '疯僧济公',
+        note: '罗汉堂中还有两尊特别的“罗汉”像，位于四大名山塑座南北两向。 北面是疯僧立像，他一手掮扫帚，一手拿吹火筒，貌似疯颠而不落俗套。此像原型取材于民间“疯僧扫秦”的故事：岳飞遇害后，一日秦桧到寺院烧香，一疯僧当众揭发其罪行并羞辱之。后人敬仰疯僧羞辱权奸的胆识和痛斥国贼的凛然正气，在寺庙中塑像供养之。后来人们逐渐将疯僧和济公和尚的形象融合。',
+        url: 'https://mp.weixin.qq.com/s/OwqYLL61YplHYPCvHdXakg',
+      },
+      {
+        name: '四大名山',
+        note: '罗汉堂的中心位置是佛教四大名山塑座，以此为中心，整个罗汉堂呈田字形布局。四大名山分别为四大菩萨成道的应化道场：普陀山为观音菩萨应化道场；五台山是文殊菩萨应化道场，骑狮子；九华山是地藏菩萨道场；峨眉山是普贤菩萨应化道场，骑白象。',
+        url: 'https://mp.weixin.qq.com/s/hXsuEuBsBWYZEPzfnlXxSg',
+      },
+    ],
+  },
+  {
+    name: '观音殿',
+    position: [120.58801, 31.314724],
+    icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
+    details: [
+      {
+        name: '观音殿',
+        note: '',
+        url: 'https://mp.weixin.qq.com/s/-b29FEPxZyE3Lu1KucmPcw',
+      },
+    ],
+  },
+  {
+    name: '藏经楼',
+    position: [120.587511, 31.316085],
+    icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
+    details: [
+      {
+        name: '',
+        note: '',
+        url: '',
+      },
+    ],
+  },
+  {
+    name: '西花园湖心亭',
+    position: [120.586478, 31.315098],
+    icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
+    details: [
+      {
+        name: '湖心亭',
+        note: '',
+        url: 'https://www.jcedu.org/202012/17340.html',
+      },
+    ],
+  },
+  {
+    name: '四百岁神龟',
+    position: [120.585947, 31.315011],
+    icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
+    details: [
+      {
+        name: '四百岁神鼋',
+        note: '',
+        url: 'https://www.jcedu.org/202012/17293.html',
+      },
+    ],
   },
 ];
 var toiletInfo = [
   {
-    name: '厕所',
+    name: '卫生间',
-    position: [120.588351, 31.31449],
+    position: [120.587063, 31.314234],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%8E%95%E6%89%80@2x.png',
+    details: [
+      {
+        name: '',
+        note: '',
+        url: '',
+      },
+    ],
   },
 ];
 var activityInfo = [
   {
-    name: '西花园湖心亭',
+    name: '素食馆',
-    position: [120.586478, 31.315098],
+    position: [120.587152, 31.314396],
+    icon: 'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE@2x.png',
+    details: [
+      {
+        name: '',
+        note: '',
+        url: '',
+      },
+    ],
+  },
+  {
+    name: '包子铺',
+    position: [120.586812, 31.314195],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
+    details: [
+      {
+        name: '',
+        note: '',
+        url: '',
+      },
+    ],
   },
   {
-    name: '四百岁神龟',
+    name: '开水房',
-    position: [120.585947, 31.315011],
+    position: [120.586752, 31.314069],
+    icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
+    details: [
+      {
+        name: '',
+        note: '',
+        url: '',
+      },
+    ],
+  },
+  {
+    name: '茶室',
+    position: [120.5868, 31.314981],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
+    details: [
+      {
+        name: '',
+        note: '',
+        url: '',
+      },
+    ],
   },
 ];
 const publicInfo = [
   {
-    name: '出入口',
+    name: '南门',
     position: [120.587788, 31.313383],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%87%BA%E5%85%A5%E5%8F%A3@2x.png',
+    details: [
+      {
+        name: '',
+        note: '',
+        url: '',
+      },
+    ],
   },
   {
-    name: '素食',
+    name: '东门',
-    position: [120.587152, 31.314396],
+    position: [120.588272, 31.31421],
-    icon: 'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE@2x.png',
+    icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%87%BA%E5%85%A5%E5%8F%A3@2x.png',
+    details: [
+      {
+        name: '',
+        note: '',
+        url: '',
+      },
+    ],
   },
 ];
 export default {
-  sheshi,
+  // sheshi,
-  touristSpots,
+  // touristSpots,
   spotInfo,
   toiletInfo,
   activityInfo,
--- a/src/components/InfoWindow.vue
View file @11e5ddb
+++ b/src/components/InfoWindow.vue
View file @11e5ddb
@@ -2,16 +2,19 @@
   <div style="position: relative;">
     <div class="info-window-wrapper">
       <div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
-        <div style="color: #AB8F57; font-size: 1.5rem; margin-bottom: 0.5rem;">三宝楼</div>
+        <div class="hideScrollBar info-window-title">
-        <div>
+          <div v-for="(item, index) in info.details" :key="index" @click="handleTitle(index)"
-          <div class="info-text van-multi-ellipsis--l3">
+            :class="[isActive === index ? 'checked' : '', 'item']">
-            大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。
+            <span>{{ item.name }}</span>
-
+          </div>
-            大殿二重檐下，悬“大雄宝殿”四个遒劲有力的金字，气势雄浑，据说这四个字是陆润庠所提。陆润庠是苏州历史上第五十五位，也是最后一位状元，官至一品、大学士(即宰相级别)。大雄宝殿是佛教寺院中供奉佛像的正殿，是整座寺院的核心建筑，也是僧众朝暮集中修持的地方。因释迦牟尼佛德号“大雄”，所以称大雄宝殿。为什么叫大雄？大者，是包含万有的意思；雄者，是摄伏群魔的意思。释迦牟尼佛具足圆觉智慧，能雄镇大千世界，降伏四魔（烦恼魔、阴魔、死魔、自在天魔），因此尊称佛陀为大雄。
+        </div>
-
+          <div v-if="info?.details?.length > 3" @click="handleNavScroll()" style="position: fixed; right: 0.75rem; width: 1rem; background-color: #FFF;top: 1.5rem;">
-            檐枋悬有三块匾额，中门之上为“西乾应迹”匾额。西者西方，乾者天也，西乾即是指佛教的发源地古印度，因当时地处中国的西方而得名，相应地，中国则被称为东土。应迹谓应化垂迹，即佛、菩萨应众生之机缘而将其本体示现种种身以济度众生。
+            <van-icon v-if="!nav_scroll" name="arrow" color="#888" size="1.25rem" style="vertical-align: sub;" />
+            <van-icon v-else name="arrow-left" color="#888" size="1.25rem" style="vertical-align: sub;" />
           </div>
-          <div class="info-control">
+        <div v-for="(item, index) in info.details" :key="index">
+          <div v-if="isActive === index" :class=" [item.audio ? 'info-text-audio' : 'info-text', 'van-multi-ellipsis--l3'] ">{{ item.note }}</div>
+          <div v-if="isActive === index && item.audio" class="info-control">
             <div v-if="!is_play" @click="play()" class="control-play">
               <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE%E6%9A%82%E5%81%9C@2x.png" size="3rem"
                 color="#FFF" style="margin-top: 0.5rem;" />
@@ -25,7 +28,8 @@
         </div>
       </div>
       <div class="van-hairline--top" style="margin: 1rem 0;">
-        <div style="width: 50%; float: left; text-align: center; margin-top: 1rem;" class="van-hairline--right">
+        <div @click="goTo()" style="width: 50%; float: left; text-align: center; margin-top: 1rem;"
+          class="van-hairline--right">
           <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>
@@ -59,6 +63,7 @@
 </template>
 <script>
+import $ from 'jquery'
 export default {
   props: {
@@ -66,9 +71,9 @@ export default {
       type: Object,
       default: () => { }
     },
-    title: {
+    info: {
-      type: String,
+      type: Object,
-      default: ''
+      default: () => { }
     },
     rect: {
       type: Object,
@@ -76,7 +81,6 @@ export default {
     },
   },
   mounted() {
-
   },
   watch: {
     rect(val) {
@@ -85,7 +89,7 @@ export default {
     infoWindow(val) {
       if (val) {
         // 加载录音
-        this.audio.src = 'https://file.365daoyou.cn/mimi-001_1505799708494-k3xkyzv8';
+        this.audio.src = this.info.details[this.isActive]['audio'];
         let play_status = this.audio.play() // 播放
         if (play_status) {
           play_status.then(() => {
@@ -110,11 +114,13 @@ export default {
       is_play: false,
       audio: new Audio(),
       widow_info: {},
-      play_time: '00:00'
+      play_time: '00:00',
+      isActive: 0,
+      nav_scroll: false,
     }
   },
   methods: {
-    getAudioTime (audio) {
+    getAudioTime(audio) {
       let time = Math.floor(audio);
       var minute = time / 60;
       var minutes = parseInt(minute);
@@ -145,6 +151,10 @@ export default {
       // 处理音频
       this.voice_pause();
       this.audio.currentTime = 0
+      // 默认选中项
+      this.isActive = 0;
+      // 滚动状态
+      this.nav_scroll = false;
     },
     showDetail() {
       this.show_popup = true;
@@ -153,7 +163,7 @@ export default {
       this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
     },
     play() {
-      this.voice_play('https://file.365daoyou.cn/mimi-001_1505799708494-k3xkyzv8', 0)
+      this.voice_play(this.info.details[this.isActive]['audio'], 0)
     },
     pause() {
       this.voice_pause()
@@ -189,6 +199,33 @@ export default {
     voice_pause() {
       this.audio.pause();
       this.is_play = false;
+    },
+    goTo(url) {
+      location.href = this.info.details[this.isActive].url;
+    },
+    handleTitle (index) {
+      this.isActive = index;
+      this.voice_pause()
+      // 标题滚动
+      if (index === 2 && this.info.details.length > 3) {
+        this.handleNavScroll()
+      }
+    },
+    handleNavScroll () { // 滚动标题
+      this.nav_scroll = !this.nav_scroll;
+      if (this.nav_scroll) {
+        setTimeout(() => {
+          $('.info-window-title').animate({
+            scrollLeft: $('.info-window-title').outerWidth()
+          }, 1000);
+        }, 100);
+      } else {
+        setTimeout(() => {
+          $('.info-window-title').animate({
+            scrollLeft: 0
+          }, 1000);
+        }, 100);
+      }
     }
   }
 }
@@ -202,10 +239,16 @@ export default {
   box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
   text-align: left;
   border-radius: 5px;
-  padding: 1rem 1.25rem;
+  padding: 1.5rem 1.25rem;
   overflow: auto;
   .info-text {
+    width: 100%;
+    line-height: 1.5;
+    float: left;
+    color: #7A6C6C;
+  }
+  .info-text-audio {
     width: 80%;
     line-height: 1.5;
     float: left;
@@ -318,4 +361,29 @@ export default {
   background-size: 1rem 1rem;
   box-shadow: none;
 }
+
+.info-window-title {
+  display: flex;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  position: relative;
+  text-align: left;
+
+  .item {
+    width: 33.333%;
+    flex-shrink: 0;
+    color: #888;
+    font-size: 1.2rem;
+    margin-bottom: 0.75rem;
+    display: inline-block;
+  }
+
+  .checked {
+    color: #AB8F57;
+    span {
+      border-bottom: 1.5px solid #AB8F57; padding-bottom: 3px;
+    }
+  }
+}
 </style>
--- a/src/views/index.vue
View file @11e5ddb
+++ b/src/views/index.vue
View file @11e5ddb
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-06-05 11:38:09
+ * @LastEditTime: 2023-06-05 16:47:36
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -9,8 +9,7 @@
   <div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
     <div id="container"></div>
     <div class="nav-bar-wrapper">
-      <div class="hideScrollBar"
+      <div class="hideScrollBar" style="display: flex; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative;">
-        style="display: flex; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative;">
         <div v-for="(item, index) in navBarList" :key="index" style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === index ? 'checked' : '', 'item']"
           @click="setNavLayer(item, index)">
           <van-icon name="shop-o" size="1.5rem" /><br />
@@ -28,10 +27,9 @@
       <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 @click="positionMarker()" style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;三宝楼</div>
+          <div v-for="(item, index) in navList[navName]" :key="index"  @click="positionMarker(item)" style="margin-bottom: 1rem; font-size: 1.15rem;">
-          <div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;法云堂</div>
+            <van-icon name="fire-o" color="red" />&nbsp;&nbsp;{{ item.name }}
-          <div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;罗汉堂</div>
+          </div>
-          <div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;大雄宝殿</div>
         </div>
       </van-popup>
     </div>
@@ -92,7 +90,7 @@
     <!-- 自定义组件InfoWindow，初始时需要隐藏 -->
     <!-- 隐藏不要使用v-if，因为我们需要渲染完成后的原生html结构作为信息框的dom对象使用 -->
-    <InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :title="infoWindowTitle" :rect="rect"></InfoWindow>
+    <InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :info="itemInfo" :rect="rect"></InfoWindow>
   </div>
 </template>
@@ -215,21 +213,23 @@ export default {
       show_nav_popup: false,
       showInfoWindow: false,
       infoWindow: {},
-      infoWindowTitle: '',
+      itemInfo: '',
       navBarList: [],
-      rect: {}
+      rect: {},
+      navList: [],
+      navName: 'spotInfo'
     }
   },
   mounted() {
     this.navBarList = [{
       key: 'spot',
-      name: '景区信息'
+      name: '景点'
     }, {
       key: 'activity',
-      name: '活动设施'
+      name: '餐饮'
     }, {
       key: 'public',
-      name: '公共设施'
+      name: '出入口'
     }, {
       key: 'toilet',
       name: '卫生间'
@@ -244,6 +244,7 @@ export default {
     this.getLocation()
     // 打开贴片地图
     this.setTitleLayer()
+    this.navList = coord;
   },
   watch: {
     show_popup(val) {
@@ -459,23 +460,22 @@ export default {
             },
             label: {
               content: coord.spotInfo[i].name,
-              position: 'TM',
+              position: 'BM',
+              offset: new AMap.Pixel(0, 10),
               minZoom: 18
             }
+          }, {
+            icon: {},
+            label: {}
           }],
-          zoomStyleMapping
+          zoomStyleMapping: coord.spotInfo[i].zoom ? coord.spotInfo[i].zoom : zoomStyleMapping
         });
         if (clickListener) {
           marker.off('click', clickListener)
         }
         // 绑定景点的点击事件 - 文字出现才能触发
         var clickListener = marker.on('click', (e) => {
-          // this.show_popup = true;
+          this.positionMarker(coord.spotInfo[i]);
-          // this.popup_title = x.name;
-          // this.popup_content = x.note;
-          // this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
-          // this.positionMarker(coord.spotInfo[i].position);
-          this.positionMarker([120.587519, 31.315924]);
         })
         //
         this.spotInfo.push(marker);
@@ -899,15 +899,19 @@ export default {
     setNavLayer({ key }, index) { // 选择地图图层显示
       this.isActive = index;
       if (key === 'spot') {
+        this.navName = 'spotInfo'
         this.setSpotLayer()
       }
       if (key === 'toilet') {
+        this.navName = 'toiletInfo'
         this.setToiletLayer()
       }
       if (key === 'activity') {
+        this.navName = 'activityInfo'
         this.setActivityLayer()
       }
       if (key === 'public') {
+        this.navName = 'publicInfo'
         this.setPublicLayer()
       }
     },
@@ -923,11 +927,11 @@ export default {
     handleNavPopup() {
       this.show_nav_popup = !this.show_nav_popup
     },
-    positionMarker(position = [120.587519, 31.315924]) {
+    positionMarker(item) {
       // 点击后创建自定义信息窗口
-      this.setInfoWindows(position)
+      this.setInfoWindows(item)
       // 把地图中心点设置为当前点击的标记点
-      this.map.setZoomAndCenter(this.zoom, position);
+      this.map.setZoomAndCenter(this.zoom, item.position);
       //
       this.show_nav_popup = false;
       // 禁止缩放
@@ -935,7 +939,7 @@ export default {
         zoomEnable: false
       });
     },
-    setInfoWindows(position) {
+    setInfoWindows(item) {
       // 此时需要把组件的样式设置为可见
       this.showInfoWindow = true
       // 设置marker头部的标题信息窗口
@@ -948,9 +952,9 @@ export default {
         offset: new AMap.Pixel(0, -30),
       })
       this.infoWindow = infoWindow;
-      this.infoWindowTitle = 'xxxx'
+      this.itemInfo = item
       // 信息窗口打开
-      infoWindow.open(this.map, position)
+      infoWindow.open(this.map, item.position)
     }
   }