hyzl/gd-earth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增点击地点标点，弹出地点信息弹窗功能

Browse Source
This commit is contained in:
qubiaobiao
2024-03-04 15:57:34 +08:00
parent e7d6b9ab9e
commit eed0aa1d50
70 changed files with 773 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/components/HotLandmark.vue
View File

@@ -1,106 +1,91 @@
<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
v-show="!showit"
class="switch"
style="position: absolute; top: -40px; right: 0; z-index: 99; cursor: pointer"
@click="showLandmark"
>
<img class="icon" src="../assets/toup.png" />
</div>
<div
v-show="showit"
class="switch"
style="position: absolute; top: -50px; right: 0; z-index: 99; cursor: pointer"
@click="showLandmark"
>
<img class="icon" src="../assets/todown.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.position.lng : "" }}</td>
<td>{{ item ? item.position.lat : "" }}</td>
<td>
<button style="cursor: pointer" @click="write(item.position)">访问</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
}
]
import { ref } from "vue";
import { usePositionStore } from "/@/stores/position";
import { landmarkArr } from "/@/information/landmark";
let showit = ref(false);
const showLandmark = () => {
showit.value = !showit.value;
}
showit.value = !showit.value;
};
const position = usePositionStore()
const position = usePositionStore();
const write = (lng,lat) => {
position.set({ lng: lng, lat: lat })
}
const write = (myposition) => {
position.set(myposition);
};
</script>
<style scoped>
.landmark {
max-height: 360px;
overflow-y:scroll;
overflow-y: scroll;
}
.switch {
width:42px;
height:42px;
width: 42px;
height: 42px;
border-radius: 50%;
background-color:#fff;
padding-top:9px;
padding-left:3px;
background-color: #fff;
padding-top: 9px;
padding-left: 3px;
}
.icon {
width:36px;
width: 36px;
}
table {
color: #FFFFFF;
color: #ffffff;
background-color: #242424;
padding: 10px;
border-radius: 7px;
border-collapse: separate;
border-spacing: 2px;
text-align:center;
text-align: center;
}
table th:first-child {
@@ -123,7 +108,8 @@ table tbody tr:nth-child(odd) {
background-color: rgba(84, 84, 84, 0.25);
}
table th, table td {
table th,
table td {
padding: 3px 5px;
}
</style>