gd-earth/src/components/HotLandmark.vue

<template>
  <div>
  <div v-show="!showit" class="switch" style="position:absolute;top:-40px;right:0;z-index:99;" @click="showLandmark">
    <img class="icon" src="../assets/up.png">
  </div>
  <div v-show="showit" class="switch" style="position:absolute;top:-50px;right:0;z-index:99;" @click="showLandmark">
    <img class="icon" src="../assets/down.png">
  </div>
  <div class="landmark">
    <table v-if="showit">
      <thead>
        <tr>
          <th>景点名称</th>
          <th>经度</th>
          <th>纬度</th>
          <th>访问景点</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in landmarkArr" :key="index">
          <td>{{ item ? item.landmark : index+1 }}</td>
          <td>{{ item ? item.lng : "" }}</td>
          <td>{{ item ? item.lat : "" }}</td>
          <td><button @click="write(item.lng,item.lat)">访问</button></td>
        </tr>
      </tbody>
    </table>
  </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { usePositionStore } from '/@/stores/position'

const landmarkArr = [
    {
        landmark:'北京天安门',
        lng:116.391243,
        lat:39.907202
    },
    {
        landmark:'北京鸟巢',
        lng:116.390502,
        lat:39.991396
    },
    {
        landmark:'上海东方明珠',
        lng:121.495263,
        lat:31.241829
    },
    {
        landmark:'香港迪斯尼',
        lng:114.042287,
        lat:22.313002
    },
    {
        landmark:'布达拉宫',
        lng:91.117684,
        lat:29.656959
    }
]

let showit = ref(false);

const showLandmark = () => {
    showit.value = !showit.value;
}

const position = usePositionStore()

const write = (lng,lat) => {
  position.set({ lng: lng, lat: lat })
}
</script>

<style scoped>
.landmark {
  max-height: 360px;
  overflow-y:scroll;
}

.switch {
  width:42px;
  height:42px;
  border-radius: 50%;
  background-color:#fff;
  padding-top:9px;
  padding-left:3px;
}

.icon {
    width:36px;
}

table {
  color: #FFFFFF;
  background-color: #242424;
  padding: 10px;
  border-radius: 7px;
  border-collapse: separate;
  border-spacing: 2px;
  text-align:center;
}

table th:first-child {
  width: 120px;
}

table th:not(:first-child) {
  width: 100px;
}

table thead tr {
  background-color: rgba(84, 84, 84, 0.8);
}

table tbody tr:nth-child(even) {
  background-color: rgba(84, 84, 84, 0.8);
}

table tbody tr:nth-child(odd) {
  background-color: rgba(84, 84, 84, 0.25);
}

table th, table td {
  padding: 3px 5px;
}
</style>