feats

src/components/CoverBtn.vue

 <style lang="less" scoped>
 .cover-btn {
   position: absolute;
-  // background: rgba(255, 0, 0, 0.5);
+  background: rgba(255, 0, 0, 0.5);
   z-index: 10;
 }
 </style>

src/components/CoverMap.vue

+<template>
+  <div class="cover-map">
+    <img :src="image" @load="onLoad" alt="" />
+    
+    <CoverBtn
+      v-for="(it, inx) in posList"
+      :key="it.name"
+      :center="btnCenters[inx]"
+      :width="60"
+      :height="20"
+      @click="() => onClick(it)"
+    >
+      <div v-if="it.mapGesture" class="gesture3" :class="{ hidden: gestureHide }" :style="getGestureStyle(60, 20)">
+        <i class="iconfont icon-cc-pointer-right"></i>
+      </div>
+    </CoverBtn>
+    
+    <AudioVue :audio="scenicSpots.audio" ref="audioRef" @play="playing = true" @stop="playing = false" />
+
+    <div v-if="show" class="map-info-box" :class="{ show }" @click.stop="show = false">
+      <div class="map-info-container" @click.stop="">
+        <img class="thumb" :src="scenicSpots.thumb2" alt="">
+        <div class="head">
+          <div>{{ scenicSpots.name }}</div>
+          <div>
+            <span @click="onClickAudio">
+              <i class="iconfont icon-playcircle" v-if="!playing"></i>
+              <i class="iconfont icon-pausecircle" v-else></i>
+            </span>
+            <span @click="onClickLoc"><i class="iconfont icon-map"></i></span>            
+          </div>
+        </div>
+        <div class="body">{{ scenicSpots.desc }}</div>  
+      </div>      
+      <div class="action" @click.stop="show = false">
+        <i class="iconfont icon-roundclose"></i>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import { resources } from '@/utils/resources';
+  import CoverBtn from './CoverBtn.vue';
+  import AudioVue from './Audio.vue';
+
+  const posList = resources.filter(x => x.mapBtnPos);
+  
+  const props = defineProps({
+    image: String,
+  });
+  
+  const show = ref(false);  
+  const gestureHide = ref(false);
+  const scenicSpots = ref({});
+  const audioRef = ref();
+  const playing = ref(false);
+  const btnCenters = ref([]);
+
+  const getGestureStyle = (width, height) => {
+    return {
+      left: `${width / 3}px`,
+      top: `${-1.6 * height}px`
+    }
+  };
+  
+  const onClick = it => {
+    scenicSpots.value = it;
+    show.value = true;
+    gestureHide.value = true;
+    stopAudio();
+  }
+  const onClickAudio = () => audioRef.value.toggle();
+  const stopAudio = () => {
+    if (playing.value) {
+      audioRef.value.toggle();
+      playing.value = false;
+    }
+  }
+  const onClickLoc = () => {
+    if (wx) {
+      wx.openLocation({
+        latitude: scenicSpots.value.mapPos[1], // 纬度，浮点数，范围为90 ~ -90
+        longitude: scenicSpots.value.mapPos[0], // 经度，浮点数，范围为180 ~ -180。
+        name: scenicSpots.value.name, // 位置名
+        address: '', // 地址详情说明
+        scale: 15, // 地图缩放级别,整型值,范围从1~28。默认为最大
+        infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
+      });
+    }
+  }
+
+  const onLoad = e => {
+    const { width, height, naturalHeight, naturalWidth } = e.target;
+    const xRate = width / naturalWidth;
+    const yRate = height / naturalHeight;
+
+    btnCenters.value = posList.map(item => {
+      const pos = item.mapBtnPos;
+      return [xRate * pos[0], yRate * pos[1]];
+    });
+  }
+
+</script>
+
+<style lang="less" scoped>
+  .cover-map {
+    position: relative;
+
+    & > img {
+      display: block;
+      width: 100vw;
+    }
+
+    .map-info-box {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 50;
+      background: transparent;
+      opacity: 0;
+      transition: opacity .6s ease-in-out;
+
+      &.show {
+        opacity: 1;
+      }
+
+      @space: 40px;
+
+      .map-info-container {
+        margin: calc(@space / 2) auto;
+        width: calc(100% - @space * 2);
+        height: calc(100% - @space * 2);
+        // padding: 1em;
+        border: 1em solid #fff;
+        border-radius: 8px;
+        box-shadow:2px 2px 3px #aaaaaa;
+        box-sizing: border-box;
+        background: #fff;
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        .thumb {
+          width: 100%;
+        }
+
+        .head {
+          box-sizing: border-box;
+          padding: 1em 0;
+          border-bottom: 1px solid #f5f5f5;
+          display: flex;
+          justify-content: space-between;
+
+          .iconfont {
+            display: inline-block;
+            font-size: 24px;
+            padding: 0 4px;
+          }
+
+          & > div {
+            flex: none;
+          }
+        }
+
+        .body {
+          box-sizing: border-box;
+          padding: 1em 0;
+          line-height: 1.6em;
+          text-indent: 2em;
+        }
+      }
+
+      @actSize: 36px;
+      .action {
+        width: @actSize;
+        height: @actSize;
+        margin: auto;
+        border-radius: 50%;
+        background: #f1f1f1;
+        box-shadow:2px 2px 3px #aaaaaa;
+        display: flex;
+        align-items: center;
+
+        .iconfont {
+          font-size: @actSize;
+          color: #444;
+        }
+      }
+    }
+
+    
+    .gesture3 {
+      position: absolute;
+      z-index: 9;
+      animation: gestureAnimation3 1.6s ease-in-out infinite;
+
+      .iconfont {
+        font-size: 24px;
+      }
+
+      &.hidden {
+        display: none;
+      }
+    }
+
+    @keyframes gestureAnimation3 {
+      from {
+        opacity: 0;
+        transform: translateY(0) rotate(90deg);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(12px) rotate(90deg);
+      }
+    }
+  }
+</style>

src/components/CustMap.vue

       center,
       zooms,
       zoom: zooms[0],
-      // dragEnable: false, // 禁止拖动
+      dragEnable: false, // 禁止拖动
+      zoomEnable: false,
     });
 
     // 获取左上角经纬度

src/components/Image.vue

     <img :src="resource.image" @load="onLoad" alt="" v-if="!isMap" />
 
     <!-- 导航地图 -->
-    <CustMap v-else :amap-key="resource.amap.key" :image="resource.image" />
+    <!-- <CustMap v-else :amap-key="resource.amap.key" :image="resource.image" /> -->
+    <CoverMap v-else :image="resource.image" />
 
     <!-- 配音 -->
     <ScenicAudio
 import ScenicAudio from "./ScenicAudio.vue";
 import ScenicDetail from "./ScenicDetail.vue";
 import CustMap from "./CustMap.vue";
+import CoverMap from "./CoverMap.vue";
 import CoverBtn from "./CoverBtn.vue";
 
 const props = defineProps({

src/components/InfoBox.vue

+<template>
+  <OverLay :visible="visible" @close="emit('close')">
+    1234
+  </OverLay>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import OverLay from './OverLay.vue';
+  
+  const props = defineProps({
+    visible: Boolean,
+  });
+  
+  const emit = defineEmits(['close']);
+  
+</script>

src/components/OverLay.vue

+<template>
+  <Teleport to="body">
+    <div class="overlay" :class="{ hidden: !visible }">
+      <div v-if="mask" class="mask"></div>
+
+      <div class="container" @click.stop="onClickMask">
+        <div class="content">
+          <slot></slot>
+        </div>
+        <div class="close" @click="emit('close')">
+          <i class="iconfont icon-roundclose"></i>
+        </div>
+      </div>
+
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+  import { watch } from 'vue';
+  const props = defineProps({
+    visible: Boolean,
+    showClose: {
+      type: Boolean,
+      default: true,
+    },
+    mask: Boolean,
+    closeOnMask: {
+      type: Boolean,
+      default: true,
+    },
+  });
+
+  const emit = defineEmits(['close']);
+
+  const onClickMask = () => {
+    console.debug('click mask');
+    if (props.closeOnMask) {
+      emit('close');
+    }
+  }
+
+  const origin = document.body.style.overflow;
+  watch(() => props.visible, (val) => {
+    if (val) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = origin;
+    }
+  }, { immediate: true });
+</script>
+
+<style lang="less" scoped>
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    z-index: 2000;
+    opacity: 1;
+    will-change: opacity;
+    transition: opacity .1s ease-out;
+
+    &.hidden {
+      opacity: 0;
+    }
+
+    .mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, .5);
+      z-index: 0;
+    }
+
+    .container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      z-index: 1;
+
+      .content {
+        flex: none;
+        border: 1em solid #fff;
+        border-radius: 8px;
+        box-shadow:2px 2px 3px #aaaaaa;
+        box-sizing: border-box;
+        background: #fff;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+
+      .close {
+        flex: none;
+        margin-top: 1em;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        background: #f1f1f1;
+        box-shadow:2px 2px 3px #aaaaaa;
+        display: flex;
+        align-items: center;
+
+        .iconfont {
+          font-size: 36px;
+          color: #444;
+        }
+      }
+    }
+
+  }
+</style>

src/main.js

 const { share } = wxsdk(location.href)
 
 const app = createApp(App);
-app.use(VueViewer)
+app.use(VueViewer);
 app.use(store);
 app.mount('#app');
 

src/utils/resources.js

     image: './images/封面2.jpg',
   },
   {
-    image: borders[0],
-    hidden: true,
-  },
-  {
-    image: borders[1],
-    hidden: true,
-  },
-  {
-    image: borders[2],
-    hidden: true,
-  },
-  {
-    image: borders[3],
-    hidden: true,
-  },
+    type: 'map',
+    image: './map/map.jpg',
+    // amap: {
+    //   key: AMAP_KEY,
+    // },
+  },
+  // {
+  //   image: borders[0],
+  //   hidden: true,
+  // },
+  // {
+  //   image: borders[1],
+  //   hidden: true,
+  // },
+  // {
+  //   image: borders[2],
+  //   hidden: true,
+  // },
+  // {
+  //   image: borders[3],
+  //   hidden: true,
+  // },
   {
     name: '文德桥',
     showGesture: true,
     playBtnPos: [373, 858],
     virtaulPos: [118.80256, 31.961141],  // 地图位置, 数据是假的，只是为了映射地图图片上的点
     mapPos: [118.789301, 32.019248],
+    mapBtnPos: [1142, 1396],
     audio: './audios/1文德桥.mp3',
     desc: `文德桥位于江苏省南京市秦淮区夫子庙泮池西侧，地处夫子庙秦淮风光带，始建于明朝万历年间，后历代均有修葺，相传为李白醉酒捞月之地，后世为以示纪念，在桥旁辟建得月台。“文德桥”的“文德”二字取自儒家思想“文章道德天下第一”。由于这座桥正处在地球的子午线上，所以每逢农历十一月十五日子时，皓月当空，水中月亮正好被这座桥分为东西两边各一半，这一奇观被称为“文德分月”，又称为“文德桥半边月”。`,
   },
     playBtnPos: [375, 882],
     virtaulPos: [118.800714, 31.968786],
     mapPos: [118.78712, 32.07729],
+    mapBtnPos: [972, 538],
     audio: './audios/2玄武湖后湖印月.mp3',
     desc: `“地拥金陵势，城回江水流。当时百万户，夹道起朱楼。亡国生春草，王宫没古丘。空余后湖月，波上对瀛州。” “后湖”是玄武湖的另一个名字，湖边赏月的李白沉浸在对历史的凭吊之中，写下了《金陵三首》，这首诗是《金陵三首》的第二篇，著名的“后湖映月”景观正是取自这首诗。一轮明月映照着波光粼粼的玄武湖，这美不胜收的场景，至今依然令南京人趋之若鹜。`,
   },
     playBtnPos: [376, 752],
     virtaulPos: [118.793289, 31.971917],
     mapPos: [118.750487, 32.110156],
+    mapBtnPos: [261, 181],
+    mapGesture: true,
     audio: './audios/3南京长江大桥.mp3',
     desc: `南京长江大桥位于南京市鼓楼区下关和浦口区桥北之间，是长江上第一座由中国自行设计和建造的双层式铁路、公路两用桥梁，具有极大的经济意义、政治意义和战略意义，有“争气桥”之称。大桥由正桥、南北桥头堡和南北引桥组成，正桥分上下两层，上层为公路桥，正桥长1577米，4车道的宽度，车行道宽15米，可容4辆大型汽车并行，两侧人行道各宽2.25米。下层为铁路桥，全长6772米，宽14米，铺设双轨，两列火车可同时对开。正桥长1576米，其余为引桥，公路引桥长3012米，宽19.5米。`,
   },
     playBtnPos: [325, 988],
     virtaulPos: [118.797495, 31.971298],
     mapPos: [118.748536, 32.0944],
+    mapBtnPos: [652, 257],
     audio: './audios/4阅江楼.mp3',
     desc: `阅江楼景区位于南京城西北狮子山巅，濒临长江。明洪武七年（1374年），明太祖朱元璋欲修未成，现建筑为2001年9月竣工景观；因明初文学家宋濂所撰《阅江楼记》而闻名，是江南四大名楼和中国十大历史文化名楼之一，有“江南第一楼”之称。阅江楼隐喻阅江揽胜之意，主楼通高52米，外观4层暗有3层，共7层，碧瓦朱楹、彤扉彩盈，具有鲜明的古典皇家气派，为典型的明代皇家建筑风格，总建筑面积约5000平方米。`,
   },
     playBtnPos: [276, 865],
     virtaulPos: [118.801529, 31.962706],
     mapPos: [118.782483, 32.017197],
+    mapBtnPos: [1048, 1230],
     audio: './audios/5秦淮河.mp3',
     desc: `秦淮河是南京古老文明的摇篮。十里秦淮沿河两岸自东吴以来便一直是繁华的商业区的居民地，六朝时成为名门望族聚居之地，商贾云集，文人荟萃，儒学鼎盛。隋唐以后，渐趋衰落，却引来无数文人骚客来此凭吊，到了宋代逐渐复苏为江南文教中心。明清两代，是十里秦淮的鼎盛时期。清未民初，内秦淮河日渐式微，繁华不再。直至1949年后，南京对秦淮河进行了大规模的疏浚治理，重点开发了秦淮风光带。2010年4月，夫子庙秦淮风光带被评为国家5A级旅游景区，2021年10月，夫子庙秦淮风光带入选首批国家级夜间文化和旅游消费集聚区。`,
   },
     playBtnPos: [427, 839],
     virtaulPos: [118.805348, 31.96034],
     mapPos: [118.78964, 32.018653],
+    mapBtnPos: [1404, 1488],
     audio: './audios/6乌衣巷.mp3',
     desc: `乌衣巷位于南京市秦淮区秦淮河上文德桥旁的南岸，地处夫子庙秦淮风光带核心地带，是中国历史最悠久最著名的古巷，当时中国世家大族居住之地，三国时是吴国戍守石头城部队营房所在地。乌衣巷是晋代王谢两家豪门大族的宅第，两族子弟都喜欢穿乌衣以显身份尊贵，因此得名。乌衣巷门庭若市，冠盖云集，走出了王羲之、王献之，及山水诗派鼻祖谢灵运等文化巨匠。1997年，秦淮区人民政府恢复了乌衣巷，并重建了具有民族风格的王谢古居纪念馆。历经千年的沧桑，如今的乌衣巷已不复昔日的繁华，没有豪门士族的觥筹交错，取而代之的是游人探访王谢华堂踪迹。`,
   },
     playBtnPos: [426, 765],
     virtaulPos: [118.800499, 31.971954],
     mapPos: [118.817183, 32.146767],
+    mapBtnPos: [939, 177],
     audio: './audios/7燕子矶.mp3',
     desc: `燕子矶位于江苏省南京市栖霞区江边的直渎山上，三面悬绝，突兀江上，如燕子般欲展翅飞掠江面，故得名燕子矶。直渎山并不高，只有四十多米，却地势险要，燕子矶雄踞山上，总扼大江，在古代是渡江的绝佳渡口和扼守古都南京的军事重地。燕子矶因其独特的地理位置和重要性，被称为万里长江第一矶，位列长江三矶之首。`,
   },
     playBtnPos: [376, 769],
     virtaulPos: [118.80346, 31.972609],
     mapPos: [118.967661, 32.155476],
+    mapBtnPos: [1228, 115],
     audio: './audios/8栖霞山.mp3',
     desc: `栖霞山，位于南京市栖霞区，古称摄山，南朝时山中建有“栖霞精舍”，因此得名。栖霞山被誉为“金陵第一明秀山”，是国家AAAA级旅游景区、中国四大赏枫胜地之一。历史上曾有五王十四帝登临栖霞山，其中乾隆六下江南，五次驻跸栖霞山。栖霞山素有“六朝胜迹”之称，在明代被列为“金陵四十八景”之一，有“一座栖霞山，半部金陵史”的美誉。栖霞山历史古迹遗址80多处，荟萃了宗教文化、帝王文化、绿色文化、民俗文化、地质文化、石刻文化、茶文化。千年古刹、佛学“三论宗”祖庭、佛教“四大丛林”之一的古栖霞寺就座落在栖霞山西麓。`,
   },
     playBtnPos: [375, 1050],
     virtaulPos: [118.799555, 31.963617],
     mapPos: [118.77531, 32.03433],
+    mapBtnPos: [853, 1117],
     audio: './audios/9朝天宫.mp3',
     desc: `朝天宫位于南京市秦淮区水西门内，是江南地区现存建筑等级最高、规模最大、保存最为完整的明清官式古建筑群落 ，素有“金陵第一胜迹”之美誉。朝天宫东为府学，中为文庙，西为卞壸祠。朝天宫之名，由明太祖朱元璋下诏御赐，取“朝拜上天”、“朝见天子”之意，是明代皇室贵族焚香祈福的道场和节庆前文武百官演习朝拜天子礼仪的场所。朝天宫与神乐观同为明朝最高等级的皇家道观。朝天宫是典型的明清殿宇式建筑，其建筑格局、样式、营造技术等是研究中国古代建筑，特别是研究明清建筑重要而难得的实物资料，具有极高的历史、艺术和科学价值。`,
   },
     playBtnPos: [108, 780],
     virtaulPos: [118.798224, 31.969951],
     mapPos: [118.794014, 32.077864],
+    mapBtnPos: [730, 406],
     audio: './audios/10玄武湖梁洲.mp3',
     desc: `梁洲是玄武湖五洲之一，面积8.81公顷，曾名老洲、旧洲、祖洲、莲花洲和美洲，是玄武湖开辟最早的一个洲，为昭明太子编《文选》的读书处，有“梁园”之称，故称梁洲。此洲擅全湖之胜，开明代后湖黄册库之滥觞。洲上人文荟萃，分布着湖神庙遗址、明代黄册库历史文化展馆、览胜楼、闻鸡亭、友谊厅、金陵盆景园等景点。每年一度的玄武湖菊展在此举行，有“梁洲秋菊”之美称。`,
   },
     playBtnPos: [418, 715],
     virtaulPos: [118.794791, 31.969405],
     mapPos: [118.796622, 32.062437],
+    mapBtnPos: [400, 468],
     audio: './audios/11玄武湖台城.mp3',
     desc: `台城位于南京市玄武区北极阁北麓、玄武湖以南，是从解放门向西延伸出的一段明城墙，这段城墙下设有南京明城垣史博物馆。这段城墙以条石为城基，城基之上用明初烧制的城砖包砌，长253.15米、高20.16米，西端宽9.8米，东端宽10.3米。明太祖朱元璋筑应天府城时，原计划将这段城墙向西修至鼓楼岗并与石头城相接，明朝洪武十九年“新筑后湖城”，这一段城墙便遭废弃。明代后多将这段城墙附会为东晋至南陈时期的台城，并讹传。`,
   },
     playBtnPos: [328, 874],
     virtaulPos: [118.80419, 31.96966],
     mapPos: [118.847882, 32.071012],
+    mapBtnPos: [1300, 430],
     audio: './audios/12紫金山.mp3',
     desc: `钟山风景名胜区位于江苏省南京市玄武区紫金山，简称钟山风景区，是中国著名的风景游览胜地、首批国家级风景名胜区、首批国家5A级旅游景区、国家森林公园、国家文明风景名胜区、中国旅游胜地四十佳，自古被誉为江南四大名山，有钟山龙蟠的美誉。钟山因山顶常有紫云萦绕，又得名紫金山。紫金山中世界文化遗产1处，全国重点文物保护单位15处，江苏省文物保护单位和市级文物保护单位共31处，“中山伟陵”是金陵新四十景之一。`,
   },
     playBtnPos: [378, 920],
     virtaulPos: [118.795993, 31.966611],
     mapPos: [118.756291, 32.04818],
+    mapBtnPos: [521, 785],
     audio: './audios/13石头城.mp3',
     desc: `清凉山古名石头山、石首山、石头城，有“六朝胜迹”之称，园内众多的名胜古迹和历史文化遗址，形成了深厚的历史文化底蕴。诸葛亮曾称金陵形势为“虎踞龙蟠”，虎踞就指今清凉山。战国时楚威王于此置金陵邑，山存有城，名石城山。三国时，东吴改筑石头城，亦名石头山。南唐时曾建避暑行宫于山上。北宋时更名清凉山，后沿用。清代时候的清凉山环境优雅，香烟缭绕，漫山古木参天，浓荫蔽日，清凉寺、扫叶楼等掩映在绿树之中。清“金陵四十八景”中，清凉山占有两个：“石城霁雪”、“清凉问佛”。`,
   },
     playBtnPos: [588, 827],
     virtaulPos: [118.794147, 31.962925],
     mapPos: [118.762613, 32.035341],
+    mapBtnPos: [337, 1199],
     audio: './audios/14莫愁湖公园.mp3',
     desc: `莫愁湖公园，位于南京市建邺区外秦淮河西侧，是一座具有1500年悠久历史的古典名园，也是南京市著名的历史文化名片，自古有“金陵第一名胜”、“金陵四十八景之首”等美誉。公园区现有规划用地面积约51.04公顷，其中陆地18.71公顷，湖面32.33公顷，绿化覆盖率达70%以上。海棠、荷花、龙舟及红木文化为景区四大传统特色，每年均会依托四大文化特色举办多彩的园事花事活动，取得了一定知名度和影响力，深受广大市民游客好评。`,
   },
     playBtnPos: [157, 828],
     virtaulPos: [118.793933, 31.963544],
     mapPos: [118.768765, 32.028598],
+    mapBtnPos: [314, 1127],
     audio: './audios/15赏心亭.mp3',
     desc: `赏心亭位于南京市秦淮区水西门广场西侧外，是一处历史名胜，宋代的金陵胜迹，历代文人均有登临怀古。赏心亭始建于宋代，曾是南京水西门内一处名胜，曾数毁数建。陆游和辛弃疾等古代文学大家都曾登临览胜，赋诗填词。在历史考证和现场调查的基础上，经过专家论证，并参照《营造法式》等宋代建筑书籍和现存宋代建筑的建造手法，在水西门西广场复建赏心亭，建筑风格延续秦淮风光带的明清建筑风格，采用宋代官式风格，八角歇山顶，灰筒瓦屋面。`,
   },
     playBtnPos: [258, 906],
     virtaulPos: [118.797152, 31.959684],
     mapPos: [118.78147, 32.01086],
+    mapBtnPos: [632, 1559],
     audio: './audios/16长干里.mp3',
     desc: `长干里位于南京市秦淮区内秦淮河以南至雨花台以北，是中国古代著名的地名，是江南佛教圣地，素有“佛陀里”之美誉。长干里地势高亢，雨花台陈于前，秦淮河卫其后，大江护其西，又是秦淮河的入江通道，战略地位十分重要。南京城市的雏形——越城就位于此。范蠡之所以选择在此筑越城，就是看到这块地方物产丰富，交通便利，商业繁荣，人中密集，同时，这里有山水卫护，攻守皆宜。秦、汉、六朝时期，长干里是南京最繁华的地方，是著名的商业区和货物集散地。`,
   },
     playBtnPos: [369, 940],
     virtaulPos: [118.802001, 31.959284],
     mapPos: [118.782965, 32.009248],
+    mapBtnPos: [1089, 1604],
     audio: './audios/17报恩寺.mp3',
     desc: `大报恩寺遗址公园位于南京市秦淮区中华门外（长干里附近），北邻外秦淮河，南接雨花台，东至1865园区，西至雨花路，是“规格最高、规模最大、保存最完整”的中国古代寺庙遗址。遗址公园中保护性展示了大报恩寺遗址中的千年地宫和珍贵画廊，以及从地宫中出土的石函、铁函、七宝阿育王塔、金棺银椁等世界级国宝，是夫子庙秦淮风光带重要组成部分。`,
   },
     playBtnPos: [538, 977],
     virtaulPos: [118.79801, 31.960886],
     mapPos: [118.769413, 32.014398],
+    mapBtnPos: [706, 1426],
     audio: './audios/18凤凰台.mp3',
     desc: `凤凰台位于南京市秦淮区长干里西北侧凤凰山上。杜牧《清明》诗中的杏花村就在附近，“竹林七贤”之一阮籍的衣冠冢也坐落于此。建成的古凤凰台景区占地2.2万平方米，主体建筑凤凰楼高25米，建筑面积1500平方米，远望则巍峨壮观，近观则雕梁彩绘。登高远眺，东接河西新区，西枕长江浪波，南抱三山葱茏，北临万家灯火，大江风貌尽收眼底，是一处叹为观止的胜地。`,
   },
     playBtnPos: [418, 889],
     virtaulPos: [118.804576, 31.963216],
     mapPos: [118.794033, 32.022665],
+    mapBtnPos: [1339, 1164],
     audio: './audios/19桃叶渡.mp3',
     desc: `桃叶渡是南京古名胜之一，位列于金陵四十八景内。在原渡口处立有“桃叶渡碑”，并建有“桃叶渡亭”，从六朝到明清，桃叶渡处均为繁华地段，河舫竞立，灯船萧鼓。传说东晋书法家王献之有个爱妾叫“桃叶”，她往来于秦淮两岸时，王献之放心不下，常常都亲自在渡口迎送，并为之作《桃叶歌》：“桃叶复桃叶，渡江不用楫；但渡无所苦，我自迎接汝。”从此渡口名声大噪久而久之南浦渡也就被称呼为桃叶渡了。`,
   },
     playBtnPos: [378, 1045],
     virtaulPos: [118.793933, 31.960194],
     mapPos: [118.781951, 31.997942],
+    mapBtnPos: [329, 1508],
     audio: './audios/20雨花台.mp3',
     desc: `雨花台最早记载于公元前1147年，泰伯在这一带传礼授农，南梁天监六年，城南门外高座寺的云光法师常在此设坛说法，感动上苍竟落花如雨，唐朝时改名为雨花台，并沿用至今。雨花台是新民主主义革命时期中国共产党人和爱国志士最集中的殉难地，新中国成立后，党和政府决定在此兴建雨花台烈士陵园，这里是中国新民主主义革命的纪念圣地。雨花台现为首批全国廉政教育基地、全国百家红色旅游经典景区和江苏省首批党性教育现场教学基地。`,
   },
     playBtnPos: [378, 822],
     virtaulPos: [118.796165, 31.95739],
     mapPos: [118.74728, 31.896331],
+    mapBtnPos: [529, 1817],
     audio: './audios/21牛首山.mp3',
     desc: `牛首山，是中国佛教名山，文化底蕴深厚，是佛教牛头禅宗的开教处和发祥地。山周围有感应泉、虎跑泉、白龟池、兜率岩、文殊洞、辟支洞、含虚阁、地涌泉、饮马池等自然景观，及宏觉寺、弘觉寺塔、郑和墓和抗金故垒等人文景观。牛首山属于宁镇丘陵西段南支，山高248米，因东西双峰对峙形似牛角而得名，风景宜人，有“春牛首”之称。清乾隆年间“牛首烟岚”列入金陵四十八景中。`,
   },
     playBtnPos: [306, 985],
     virtaulPos: [118.800971, 31.957136],
     mapPos: [118.91752, 31.46876],
+    mapBtnPos: [976, 1846],
     audio: './audios/22石臼湖.mp3',
     desc: `石臼湖，位于江苏省南京市溧水区、高淳区和安徽省马鞍山市当涂县、博望区三区一县交界，是古丹阳湖的一部分，最大面积200多平方公里，湖泊具有灌溉、蓄洪、航运和养殖等多种功能。湖区物产资源丰富，其中以银鱼、螃蟹、野鸭等“三珍”最为出名。石臼湖被人们赞誉为“日出一斗金，夜出一斗银”。但由于无节制捕捞，最晚在21世纪初，银鱼等珍贵品种已经消失。“石臼渔歌”是新金陵四十景之一。`,
   },
     playBtnPos: [639, 816],
     virtaulPos: [118.803589, 31.958155],
     mapPos: [118.839137, 31.955481],
+    mapBtnPos: [1242, 1729],
     audio: './audios/23东山.mp3',
     desc: `东山亦名土山，高62.1米，东晋丞相谢安受命抗御前秦符坚百万南侵之师，谢安一面派名将率8万精兵迎战，一面与家人、朋友至东山别墅“围棋睹墅”安定民心。淝水一战击溃符坚大军，创以少胜多之范例。东山留有“东山别墅”遗址。东山历史上多林木，且“山多蔷薇，春来作花，灿如云锦，故游迹胜矣”。`,
   },
     playBtnPos: [205, 768],
     virtaulPos: [118.796422, 31.961796],
     mapPos: [118.785171, 32.021043],
+    mapBtnPos: [568, 1320],
     audio: './audios/24瞻园.mp3',
     desc: `瞻园位于江苏省南京市秦淮区夫子庙秦淮风光带核心区，是南京现存历史最久的明代古典园林、“江南四大名园”之一。其历史可追溯至明太祖朱元璋称帝前的吴王府，后赐予中山王徐达的府邸花园，素以假山著称，以欧阳修诗“瞻望玉堂，如在天上”而命名，明代被称为“南都第一园”。现为全国重点文物保护单位、国家AAAAA级旅游景区。`,
   },
     playBtnPos: [367, 1107],
     virtaulPos: [118.796207, 31.963908],
     mapPos: [118.767671, 32.053006],
+    mapBtnPos: [540, 1084],
     audio: './audios/25随园.mp3',
     desc: `随园位于南京五台山余脉小仓山一带，原为曹雪芹祖上林园，是著名的私家江南园林，清代江南的三大名园之一，现地面主体建筑均已不存，仅存遗址。清乾隆十三年，袁枚购得此园，名之为“随园”，死后即葬于随园。随园在太平天国时期被夷为平地，片橼无存。后太平军开荒种粮，拆毁随园，将园中珍宝运走，天下名园成为了农庄。1923年7月，金陵女子大学校址永久移至随园，随园原为江苏省文物保护单位。`,
   },
     playBtnPos: [376, 939],
     virtaulPos: [118.797752, 31.965983],
     mapPos: [118.794237, 32.058407],
+    mapBtnPos: [693, 853],
     audio: './audios/26南京世界文学客厅.mp3',
     desc: `南京世界文学客厅位于南京紫金山入城余脉、古鸡笼山下东南角，由一座3000平方米的院落改造而成。1500多年前，这里是中国历史上第一座文学馆所在地，而今是南京文学空间网络建设的中心和枢纽，承担了南京文学空间城市空间建设引领性的作用，打造“文学之都”的城市客厅、交流展示中心、文学创新活动的试验场，展示南京的文学文脉和作为天下文枢的独特地位，链接全市文学空间与地标，建立数据共享系统，促进文学互动展示体验与文学创作创新。`,
   },
-  {
-    type: 'map',
-    image: './map/map.png',
-    amap: {
-      key: AMAP_KEY,
-    },
-  },
   {
     image: './images/27末尾.jpg',
     links: [