wangyifang
/
slake-school-service
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

地图

Browse Source
master
lion 12 hours ago
parent a997da7326
commit f5ea0867d3
1 changed files with 51 additions and 43 deletions
Show Stats Download Patch File Download Diff File

94
resources/views/miniapp-radar.blade.php
Unescape View File

@ -7,29 +7,28 @@
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #f5f6f8; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; }
.radar-layout {
display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden;
}
.radar-map-wrap {
position: relative; flex: 0 0 50%; width: 100%; min-height: 0; overflow: hidden;
}
#map { width: 100%; height: 100%; touch-action: none; }
.status-bar {
position: fixed; top: 12px; left: 50%; z-index: 1000; transform: translateX(-50%);
position: absolute; top: 12px; left: 50%; z-index: 1000; transform: translateX(-50%);
max-width: 88%; padding: 8px 14px; border-radius: 8px; background: rgba(255,255,255,.94);
color: #374151; font-size: 13px; box-shadow: 0 4px 16px rgba(15,23,42,.08);
}
.status-bar.error { color: #b45309; }
.panel-mask {
position: fixed; inset: 0; z-index: 1100; background: rgba(15,23,42,.28);
opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.panel-mask.visible { opacity: 1; pointer-events: auto; }
.teacher-panel {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
max-height: 68vh; padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
border-radius: 16px 16px 0 0; background: #fff;
transform: translateY(100%); transition: transform .24s ease;
box-shadow: 0 -8px 28px rgba(15,23,42,.12);
display: flex; flex-direction: column; flex: 0 0 50%; width: 100%; min-height: 0;
padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
border-top: 1px solid #e5e7eb; background: #fff;
box-shadow: 0 -4px 16px rgba(15,23,42,.06);
}
.teacher-panel.visible { transform: translateY(0); }
.panel-title { color: #111827; font-size: 18px; font-weight: 600; }
.panel-sub { margin-top: 4px; color: #6b7280; font-size: 13px; }
.panel-scroll { max-height: 52vh; margin-top: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.panel-scroll { flex: 1; min-height: 0; margin-top: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.college-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 0; border-bottom: 1px solid #eef2f6; cursor: pointer;
@ -76,13 +75,16 @@
</style>
</head>
<body>
<div id="map"></div>
<div id="status" class="status-bar" style="display:none"></div>
<div id="panelMask" class="panel-mask"></div>
<div id="teacherPanel" class="teacher-panel">
<div class="panel-title" id="panelTitle">高校老师</div>
<div class="panel-sub" id="panelSub"></div>
<div class="panel-scroll" id="panelScroll"></div>
<div class="radar-layout">
<div class="radar-map-wrap">
<div id="map"></div>
<div id="status" class="status-bar" style="display:none"></div>
</div>
<div id="teacherPanel" class="teacher-panel">
<div class="panel-title" id="panelTitle">高校学院</div>
<div class="panel-sub" id="panelSub">加载中...</div>
<div class="panel-scroll" id="panelScroll"></div>
</div>
</div>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
@ -260,30 +262,32 @@
openCollegePanel(school);
}
function openCollegePanel(school) {
function renderCollegePanel(school) {
document.getElementById('panelTitle').textContent = school.name || '高校学院';
document.getElementById('panelSub').textContent = (school.city || '') + ' · ' + (school.teachers_count || 0) + ' 位老师';
const scroll = document.getElementById('panelScroll');
const colleges = school.colleges || [];
if (!colleges.length) {
scroll.innerHTML = '<div class="panel-empty">该高校暂无学院数据</div>';
} else {
scroll.innerHTML = colleges.map((c) => (
'<div class="college-row" data-key="' + escapeHtml(c.key) + '">' +
'<div><span class="college-name">' + escapeHtml(c.name) + '</span>' +
'<span class="college-count">' + (c.teachers_count || 0) + ' 位老师</span></div>' +
'<span class="teacher-arrow">›</span></div>'
)).join('');
scroll.querySelectorAll('.college-row').forEach((row) => {
row.addEventListener('click', () => {
const key = row.dataset.key;
const college = colleges.find((item) => item.key === key);
if (college) openTeacherPanel(school, college);
});
});
return;
}
document.getElementById('panelMask').classList.add('visible');
document.getElementById('teacherPanel').classList.add('visible');
scroll.innerHTML = colleges.map((c) => (
'<div class="college-row" data-key="' + escapeHtml(c.key) + '">' +
'<div><span class="college-name">' + escapeHtml(c.name) + '</span>' +
'<span class="college-count">' + (c.teachers_count || 0) + ' 位老师</span></div>' +
'<span class="teacher-arrow">›</span></div>'
)).join('');
scroll.querySelectorAll('.college-row').forEach((row) => {
row.addEventListener('click', () => {
const key = row.dataset.key;
const college = colleges.find((item) => item.key === key);
if (college) openTeacherPanel(school, college);
});
});
}
function openCollegePanel(school) {
renderCollegePanel(school);
}
function openTeacherPanel(school, college) {
@ -318,13 +322,11 @@
}
}
function closeTeacherPanel() {
activeSchool = null;
function backToCollegePanel() {
if (!activeSchool) return;
activeCollege = null;
panelMode = 'colleges';
schoolOverlays.forEach(({ overlay }) => overlay.setActive(false));
document.getElementById('panelMask').classList.remove('visible');
document.getElementById('teacherPanel').classList.remove('visible');
openCollegePanel(activeSchool);
}
function openTeacher(id) {
@ -360,6 +362,9 @@
schools = data.schools || [];
if (!schools.length) {
setStatus('暂无已配置坐标的高校', true);
document.getElementById('panelTitle').textContent = '暂无高校数据';
document.getElementById('panelSub').textContent = '';
document.getElementById('panelScroll').innerHTML = '<div class="panel-empty">暂无已配置坐标的高校</div>';
return;
}
const T = await loadTianditu();
@ -380,13 +385,16 @@
});
applyOverlayPassthrough(mapInstance);
unbindDragPan = bindMapDragPan(mapInstance, T);
selectSchool(schools[0]);
setStatus('');
} catch (e) {
setStatus(e.message || '地图初始化失败', true);
document.getElementById('panelTitle').textContent = '加载失败';
document.getElementById('panelSub').textContent = '';
document.getElementById('panelScroll').innerHTML = '<div class="panel-empty">' + escapeHtml(e.message || '地图初始化失败') + '</div>';
}
}
document.getElementById('panelMask').addEventListener('click', closeTeacherPanel);
initMap();
</script>
</body>

Write Preview
Loading…
Cancel
Save