Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
11e5ddb3 1 parent eb9362e8

建筑景点样式调整

Inline Side-by-side
Showing 4 changed files with 489 additions and 177 deletions
......@@ -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']
}
}
......
var sheshi = [{
name: '停车场',
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.410226, 39.88364],
icon: 'https://a.amap.com/jsapi_demos/static/resource/img/洗手间.png'
}, {
name: '洗手间',
position: [116.412247, 39.887258],
icon: 'https://a.amap.com/jsapi_demos/static/resource/img/洗手间.png'
}, {
name: '洗手间',
position: [116.412701, 39.874841],
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 sheshi = [
// {
// name: '停车场',
// 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.410226, 39.88364],
// icon: 'https://a.amap.com/jsapi_demos/static/resource/img/洗手间.png',
// },
// {
// name: '洗手间',
// position: [116.412247, 39.887258],
// icon: 'https://a.amap.com/jsapi_demos/static/resource/img/洗手间.png',
// },
// {
// name: '洗手间',
// position: [116.412701, 39.874841],
// 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 = [{
name: '祈年殿',
position: [116.412866, 39.88365],
zIndex: 300,
smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/故宫.png',
bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/qiniandian.png',
size: [128, 160],
anchor: 'bottom-center',
minZoom: 19
}, {
name: '西天门',
position: [116.405562, 39.881166],
smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/门.png',
bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men.png',
size: [146, 144],
anchor: 'bottom-center',
minZoom: 18
}, {
name: '北天门',
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',
size: [185, 94],
anchor: 'bottom-center',
minZoom: 17
}, {
name: '百花园',
position: [116.40783, 39.88212],
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',
size: [210, 98],
anchor: 'bottom-center',
minZoom: 16
}, {
name: '万寿亭',
position: [116.406792, 39.8837],
smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/景点.png',
bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/tingzi.png',
size: [128, 168],
anchor: 'bottom-center',
minZoom: 15
}, {
name: '圜丘',
position: [116.413219, 39.876967],
smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/景点.png',
bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men4.png',
size: [148, 137],
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 touristSpots = [
// {
// name: '祈年殿',
// position: [116.412866, 39.88365],
// zIndex: 300,
// smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/故宫.png',
// bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/qiniandian.png',
// size: [128, 160],
// anchor: 'bottom-center',
// minZoom: 19,
// },
// {
// name: '西天门',
// position: [116.405562, 39.881166],
// smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/门.png',
// bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men.png',
// size: [146, 144],
// anchor: 'bottom-center',
// minZoom: 18,
// },
// {
// name: '北天门',
// 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',
// size: [185, 94],
// anchor: 'bottom-center',
// minZoom: 17,
// },
// {
// name: '百花园',
// position: [116.40783, 39.88212],
// 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',
// size: [210, 98],
// anchor: 'bottom-center',
// minZoom: 16,
// },
// {
// name: '万寿亭',
// position: [116.406792, 39.8837],
// smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/景点.png',
// bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/tingzi.png',
// size: [128, 168],
// anchor: 'bottom-center',
// minZoom: 15,
// },
// {
// name: '圜丘',
// position: [116.413219, 39.876967],
// smallIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/景点.png',
// bigIcon: 'https://a.amap.com/jsapi_demos/static/resource/img/men4.png',
// size: [148, 137],
// 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: '三宝楼',
position: [120.587436, 31.316177],
name: '照壁',
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: '法云堂',
position: [120.587884, 31.3152],
name: '福德智慧二桥',
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: '罗汉堂',
position: [120.587581, 31.31505],
name: '御赐牌楼',
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: `大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。
大殿二重檐下，悬“大雄宝殿”四个遒劲有力的金字，气势雄浑，据说这四个字是陆润庠所提。陆润庠是苏州历史上第五十五位，也是最后一位状元，官至一品、大学士(即宰相级别)。大雄宝殿是佛教寺院中供奉佛像的正殿，是整座寺院的核心建筑，也是僧众朝暮集中修持的地方。因释迦牟尼佛德号“大雄”，所以称大雄宝殿。为什么叫大雄？大者，是包含万有的意思；雄者，是摄伏群魔的意思。释迦牟尼佛具足圆觉智慧，能雄镇大千世界，降伏四魔（烦恼魔、阴魔、死魔、自在天魔），因此尊称佛陀为大雄。
檐枋悬有三块匾额，中门之上为“西乾应迹”匾额。西者西方，乾者天也，西乾即是指佛教的发源地古印度，因当时地处中国的西方而得名，相应地，中国则被称为东土。应迹谓应化垂迹，即佛、菩萨应众生之机缘而将其本体示现种种身以济度众生。
东门上为“焰网庄严”匾额，出处为《药师经》第二大愿：“身善能安住，焰网庄严，过于日月”,即所谓“药师如来琉璃光,焰网庄严无等伦”，形容的是东方药师佛世界；西门上为“光寿无量”匾额，是“无量寿、无量光”的意思，意指西方阿弥陀佛光寿无量。“三个匾额”与殿内供奉的“横世三佛”内外呼应。与“西乾应迹”相呼应的中间一尊佛像是释迦摩尼佛，大迦叶尊者与阿难尊者分立两侧；与“焰网庄严”相呼应的则是药师佛，位于东侧；与“光寿无量”相呼应的则是阿弥陀佛，位于西侧。几尊佛像均是香樟木雕刻，是现存不多的清时期极具代表性的大型木雕造像。三尊佛像下莲花座、金刚须弥座雕刻精美、令人叹为观止。
大殿内有三副抱柱楹联，外侧上联为“东震涌庄严，看桥通鹤市，山近虎丘，招提久占三吴胜”；下联为“西来参本意，任侠士流芳，生公说法，照澈都归五蕴空”。“鹤市”，阖闾女亡，出殡时，鹤舞于阊门，后以鹤市代指阊门。“生公说法”，是指南北朝的高僧竺道生在虎丘山上说法，最后顽石也点头赞同的典故。后有题记：“乙丑（1925）春仲，郡人许人俊谨题”。
内侧有两副，内外上联为“宝相瞻大雄，象法禅机垂正觉”；下联为“劳生来小息，鱼音梵呗涤尘烦”；“余姚黄雨斋撰立，江东浦泳谨书”。
内中上联为“海国启琳宫，宏法利生扬正教”；下联为“灵山闻妙谛，觉迷度苦感仁王”；“弟子夏士魁长发头陀敬献，江东浦泳谨书”。
两副对联均作于民国三十三年（1944），其中“感仁王”三字年久剥落，1985年浦泳老先生重游西园寺，见字残缺，说“趁我有生之年，把字补好”。不久果寄来字样，重修时已把字补上，亦可告慰于浦老矣！`,
details: [
{
name: '大雄宝殿',
note: '大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。',
url: 'https://mp.weixin.qq.com/s/jpG4kmRH6LiW67EuMmc3OA',
},
{
name: '智行菩萨​',
note: '西园戒幢律寺的罗汉堂，是中国四大罗汉堂之一。一进门，正中就是一尊四面千手千眼观音。 这尊金身立相的观音妙相庄严，身穿天衣，腰束飘巾，折式衣裙，犹如轻纱；头戴天冠，天冠中雕有化佛；胸前双手合十，其腰间双手置腹下作禅定印，肩上双手伸过冠顶，似托头顶放光化佛之状，其余两手持法器；身分四面，总具千手，掌心各刻一眼，以示千手千眼。',
url: 'https://mp.weixin.qq.com/s/GeFu3Ux-CcI_axsdeMbqJw',
},
{
name: '庄严主佛像​',
note: '大雄宝殿内迎面是三尊高大的塑像：释迦如来居中，东面是药师如来，西面是阿弥陀如来。',
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: '厕所',
position: [120.588351, 31.31449],
name: '卫生间',
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: '西花园湖心亭',
position: [120.586478, 31.315098],
name: '素食馆',
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: '四百岁神龟',
position: [120.585947, 31.315011],
name: '开水房',
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: '素食',
position: [120.587152, 31.314396],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE@2x.png',
name: '东门',
position: [120.588272, 31.31421],
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,
touristSpots,
// sheshi,
// touristSpots,
spotInfo,
toiletInfo,
activityInfo,
......
......@@ -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>
<div class="info-text van-multi-ellipsis--l3">
大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。
大殿二重檐下，悬“大雄宝殿”四个遒劲有力的金字，气势雄浑，据说这四个字是陆润庠所提。陆润庠是苏州历史上第五十五位，也是最后一位状元，官至一品、大学士(即宰相级别)。大雄宝殿是佛教寺院中供奉佛像的正殿，是整座寺院的核心建筑，也是僧众朝暮集中修持的地方。因释迦牟尼佛德号“大雄”，所以称大雄宝殿。为什么叫大雄？大者，是包含万有的意思；雄者，是摄伏群魔的意思。释迦牟尼佛具足圆觉智慧，能雄镇大千世界，降伏四魔（烦恼魔、阴魔、死魔、自在天魔），因此尊称佛陀为大雄。
檐枋悬有三块匾额，中门之上为“西乾应迹”匾额。西者西方，乾者天也，西乾即是指佛教的发源地古印度，因当时地处中国的西方而得名，相应地，中国则被称为东土。应迹谓应化垂迹，即佛、菩萨应众生之机缘而将其本体示现种种身以济度众生。
<div class="hideScrollBar info-window-title">
<div v-for="(item, index) in info.details" :key="index" @click="handleTitle(index)"
: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: {
type: String,
default: ''
info: {
type: Object,
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>
......
<!--
* @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"
style="display: flex; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative;">
<div class="hideScrollBar" 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 style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;法云堂</div>
<div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;罗汉堂</div>
<div 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;">
<van-icon name="fire-o" color="red" />&nbsp;&nbsp;{{ item.name }}
</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.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.positionMarker(coord.spotInfo[i]);
})
//
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)
}
}
......