Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4e9f9796 1 parent a8612cb4

fix 标记数据结构调整

Inline Side-by-side
Showing 4 changed files with 97 additions and 17 deletions
<!--
* @Date: 2023-07-27 11:04:04
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-02 07:17:28
* @LastEditTime: 2023-08-04 16:00:11
* @FilePath: /map-demo/src/components/Floor/index.vue
* @Description: 文件描述
-->
......@@ -44,7 +44,7 @@
:class="['level', 'level--' + (index + 1)]">
<div v-html="level.svg"></div>
<div class="level__pins">
<a v-for="(item, index) in level.pin" :key="index" class="pin" :style="item.style"
<a @click="clickPin(item, $event)" v-for="(item, index) in level.pin" :key="index" class="pin" :style="item.style"
:data-category="item.category" :data-space="item.space">
<span class="pin__icon">
<svg class="icon icon--pin">
......@@ -69,10 +69,8 @@
<van-icon name="cross" size="1.5rem" />
</div>
<div style="margin: 0 1rem">
<div style="font-size: 1.25rem; margin-bottom: 1rem;">大雄宝殿</div>
<div>
大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。
</div>
<div style="font-size: 1.25rem; margin-bottom: 1rem;">{{ popup_title }}</div>
<div> {{ popup_content }} </div>
</div>
</van-popup>
......@@ -109,6 +107,8 @@ export default {
show_popup: false,
show_search_popup: false,
level_list: Data,
popup_title: '',
popup_content: '',
search_list: [
{
title: '1-客房',
......@@ -144,12 +144,6 @@ export default {
}
},
async mounted() {
// 绑定选择点后回调
$('.level__pins').children('.pin').on('click', (evt) => {
this.clearPinShow();
$(evt.currentTarget).addClass('pin--active');
this.show_popup = true;
});
},
methods: {
clearPinShow() {
......@@ -224,7 +218,15 @@ export default {
onClosePopup() {
this.show_popup = false;
this.clearPinShow();
}
},
clickPin (item, evt) { // 点击pin操作
this.clearPinShow();
$(evt.target).parents('a.pin').addClass('pin--active');
this.show_popup = true;
// 打开 pin 详情信息
this.popup_title = item?.affix?.title;
this.popup_content = item?.affix?.content;
},
}
}
</script>
......
/*
* @Date: 2023-08-01 13:55:03
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-01 16:12:24
* @LastEditTime: 2023-08-04 16:06:07
* @FilePath: /map-demo/src/components/Floor/pin.js
* @Description: 文件描述
*/
......@@ -336,10 +336,14 @@ const testInfo = [
pin: [
{
id: 'pin--4-1',
category: 1,
category: 2,
space: 4.01,
icon: 'tomato',
style: { top: '55vmin', left: '21vmin' },
affix: {
title: '宿舍401',
content: '休息室',
},
},
{
id: 'pin--4-2',
......@@ -347,6 +351,10 @@ const testInfo = [
space: 4.02,
icon: 'cinema',
style: { top: '18vmin', left: '20vmin' },
affix: {
title: '宿舍402',
content: '休息室',
},
},
{
id: 'pin--4-3',
......@@ -354,6 +362,10 @@ const testInfo = [
space: 4.03,
icon: 'paint-brush',
style: { top: '21vmin', left: '88vmin' },
affix: {
title: '宿舍403',
content: '休息室',
},
},
{
id: 'pin--4-4',
......@@ -361,6 +373,10 @@ const testInfo = [
space: 4.04,
icon: 'modx',
style: { top: '52vmin', left: '74vmin' },
affix: {
title: '宿舍404',
content: '休息室',
},
},
{
id: 'pin--4-5',
......@@ -368,6 +384,10 @@ const testInfo = [
space: 4.05,
icon: 'droplet',
style: { top: '33vmin', left: '38vmin' },
affix: {
title: '宿舍405',
content: '休息室',
},
},
{
id: 'pin--4-6',
......@@ -375,6 +395,10 @@ const testInfo = [
space: 4.06,
icon: 'cupcake',
style: { top: '39vmin', left: '56vmin' },
affix: {
title: '宿舍406',
content: '休息室',
},
},
{
id: 'pin--4-7',
......@@ -382,6 +406,10 @@ const testInfo = [
space: 4.07,
icon: 'leafcircle',
style: { top: '58vmin', left: '10vmin' },
affix: {
title: '宿舍407',
content: '休息室',
},
},
],
},
......
This diff could not be displayed because it is too large.
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-31 18:14:27
* @LastEditTime: 2023-08-04 15:34:12
* @FilePath: /map-demo/src/views/inner.vue
* @Description: 内部地图主体页面
-->
......@@ -277,7 +277,7 @@ export default {
point_range: [ // 景区范围经纬度
[120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
],
show_floor_popup: false,
show_floor_popup: true,
}
},
async mounted() {
......@@ -392,6 +392,10 @@ export default {
this.map.setZoomAndCenter(this.defaultZoom, this.defaultCenter);
}, 100);
this.removeNavRoute();
// 测试选择人员后轮询
if (id === 'members') {
this.testPolling()
}
},
loadMaker (id) {
var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
......@@ -1197,6 +1201,52 @@ export default {
},
onClose () {
this.show_floor_popup = false;
},
testPolling () { // 测试轮询
let index = 1; // 控制何时停止轮询
let timer = 0; // 实现中断轮询
// syncPromise 模拟异步请求
const syncPromise = () => {
return new Promise(resolve => {
setTimeout(() => {
console.log(`第 ${index} 次请求`);
resolve(index < 5 ? true : false); // 当进行 5 次异步请求后，会返回 false 表示拿到数据分析结果，停止数据查询轮询：
index++;
}, 50);
});
}
// pollingPromise 作为 sleep 睡眠函数使用，去控制轮询的间隔时间，并在指定时间执行异步请求
const pollingPromise = () => {
return new Promise(resolve => {
timer = setTimeout(async () => {
const result = await syncPromise();
resolve(result);
}, 1000);
});
}
// startPolling 作为开始轮询的入口
const startPolling = async () => {
// 清除进行中的轮询，重新开启计时轮询
clearTimeout(timer); // !!! 注意：清除计时器后，会导致整个 async/await 链路中断，若计时器的位置下方还存在代码，将不会执行。
index = 1;
// 立刻执行一次异步请求
let needPolling = await syncPromise();
// 根据异步请求结果，判断是否需要开启计时轮询
while (needPolling) {
needPolling = await pollingPromise();
}
console.log('轮询请求处理完成！'); // 若异步请求被 clearTimeout(timer)，这里不会被执行打印输出。
}
const start = async () => {
await startPolling();
console.log('若异步请求被 clearTimeout(timer)，这里将不会被执行');
}
start();
}
}
}
......