693 lines
21 KiB
JavaScript
693 lines
21 KiB
JavaScript
/**
|
||
* 会面点 - Meeting Point
|
||
* 前端应用主逻辑
|
||
*/
|
||
|
||
// ========================================
|
||
// 全局状态
|
||
// ========================================
|
||
|
||
const state = {
|
||
map: null,
|
||
amapKey: '', // Web服务API Key
|
||
amapJsKey: '', // JS API Key
|
||
amapJsSecret: '', // JS API 安全密钥
|
||
locations: [], // 参与者位置列表
|
||
markers: [], // 位置标记
|
||
centerMarker: null, // 中心点标记
|
||
poiMarkers: [], // POI标记
|
||
center: null, // 计算出的中心点
|
||
searchCircle: null, // 搜索范围圆
|
||
infoWindow: null, // 信息窗口
|
||
currentPOIs: [], // 当前搜索结果
|
||
colors: [
|
||
'#3b82f6', '#ef4444', '#10b981', '#8b5cf6',
|
||
'#f59e0b', '#ec4899', '#06b6d4', '#84cc16'
|
||
]
|
||
};
|
||
|
||
// ========================================
|
||
// 初始化
|
||
// ========================================
|
||
|
||
document.addEventListener('DOMContentLoaded', async () => {
|
||
await loadConfig();
|
||
initMap();
|
||
bindEvents();
|
||
});
|
||
|
||
async function loadConfig() {
|
||
try {
|
||
const response = await fetch('/api/config');
|
||
const data = await response.json();
|
||
state.amapKey = data.amap_key;
|
||
state.amapJsKey = data.amap_js_key || data.amap_key;
|
||
state.amapJsSecret = data.amap_js_secret;
|
||
|
||
// 配置安全密钥（必须在加载JS API之前设置）
|
||
if (state.amapJsSecret) {
|
||
window._AMapSecurityConfig = {
|
||
securityJsCode: state.amapJsSecret
|
||
};
|
||
}
|
||
|
||
// 动态加载高德地图JS API
|
||
return new Promise((resolve, reject) => {
|
||
const script = document.createElement('script');
|
||
script.src = `https://webapi.amap.com/maps?v=2.0&key=${state.amapJsKey}&plugin=AMap.PlaceSearch,AMap.Geocoder,AMap.AutoComplete`;
|
||
script.onload = resolve;
|
||
script.onerror = () => reject(new Error('加载高德地图JS API失败'));
|
||
document.head.appendChild(script);
|
||
});
|
||
} catch (error) {
|
||
console.error('加载配置失败:', error);
|
||
alert('加载配置失败，请检查后端服务是否启动');
|
||
}
|
||
}
|
||
|
||
function initMap() {
|
||
// 初始化地图
|
||
state.map = new AMap.Map('mapContainer', {
|
||
zoom: 12,
|
||
center: [116.397428, 39.90923], // 默认北京
|
||
mapStyle: 'amap://styles/dark', // 深色主题
|
||
viewMode: '2D'
|
||
});
|
||
|
||
// 初始化信息窗口
|
||
state.infoWindow = new AMap.InfoWindow({
|
||
isCustom: true,
|
||
autoMove: true,
|
||
offset: new AMap.Pixel(0, -40)
|
||
});
|
||
|
||
// 地图点击事件
|
||
state.map.on('click', handleMapClick);
|
||
|
||
// 尝试定位到用户位置
|
||
AMap.plugin('AMap.Geolocation', () => {
|
||
const geolocation = new AMap.Geolocation({
|
||
enableHighAccuracy: true,
|
||
timeout: 10000
|
||
});
|
||
|
||
geolocation.getCurrentPosition((status, result) => {
|
||
if (status === 'complete') {
|
||
state.map.setCenter([result.position.lng, result.position.lat]);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// ========================================
|
||
// 事件绑定
|
||
// ========================================
|
||
|
||
function bindEvents() {
|
||
// 搜索输入
|
||
const searchInput = document.getElementById('searchInput');
|
||
const clearSearch = document.getElementById('clearSearch');
|
||
const searchTips = document.getElementById('searchTips');
|
||
|
||
let searchTimeout;
|
||
searchInput.addEventListener('input', (e) => {
|
||
const value = e.target.value.trim();
|
||
clearSearch.style.display = value ? 'block' : 'none';
|
||
|
||
clearTimeout(searchTimeout);
|
||
if (value.length >= 2) {
|
||
searchTimeout = setTimeout(() => fetchSearchTips(value), 300);
|
||
} else {
|
||
searchTips.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
clearSearch.addEventListener('click', () => {
|
||
searchInput.value = '';
|
||
clearSearch.style.display = 'none';
|
||
searchTips.classList.remove('active');
|
||
});
|
||
|
||
// 点击外部关闭搜索提示
|
||
document.addEventListener('click', (e) => {
|
||
if (!e.target.closest('.search-box')) {
|
||
searchTips.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
// 快捷标签
|
||
document.querySelectorAll('.tag').forEach(tag => {
|
||
tag.addEventListener('click', () => {
|
||
document.querySelectorAll('.tag').forEach(t => t.classList.remove('active'));
|
||
tag.classList.add('active');
|
||
document.getElementById('poiKeywords').value = tag.dataset.keyword;
|
||
});
|
||
});
|
||
|
||
// 搜索半径滑块
|
||
const radiusSlider = document.getElementById('searchRadius');
|
||
const radiusValue = document.getElementById('radiusValue');
|
||
|
||
radiusSlider.addEventListener('input', () => {
|
||
const value = parseInt(radiusSlider.value);
|
||
radiusValue.textContent = value >= 1000 ? `${value / 1000} 公里` : `${value} 米`;
|
||
});
|
||
|
||
// 搜索按钮
|
||
document.getElementById('searchBtn').addEventListener('click', handleSearch);
|
||
|
||
// POI关键词输入
|
||
document.getElementById('poiKeywords').addEventListener('input', () => {
|
||
document.querySelectorAll('.tag').forEach(t => t.classList.remove('active'));
|
||
});
|
||
}
|
||
|
||
// ========================================
|
||
// 搜索提示
|
||
// ========================================
|
||
|
||
async function fetchSearchTips(keywords) {
|
||
const searchTips = document.getElementById('searchTips');
|
||
|
||
try {
|
||
const response = await fetch(`/api/tips?keywords=${encodeURIComponent(keywords)}&city=`);
|
||
const data = await response.json();
|
||
|
||
if (data.tips && data.tips.length > 0) {
|
||
renderSearchTips(data.tips);
|
||
} else {
|
||
searchTips.classList.remove('active');
|
||
}
|
||
} catch (error) {
|
||
console.error('获取搜索提示失败:', error);
|
||
}
|
||
}
|
||
|
||
function renderSearchTips(tips) {
|
||
const searchTips = document.getElementById('searchTips');
|
||
|
||
searchTips.innerHTML = tips.map(tip => `
|
||
<div class="search-tip-item" data-lng="${tip.location.lng}" data-lat="${tip.location.lat}" data-name="${tip.name}" data-address="${tip.district}${tip.address}">
|
||
<div class="name">${tip.name}</div>
|
||
<div class="address">${tip.district}${tip.address}</div>
|
||
</div>
|
||
`).join('');
|
||
|
||
// 绑定点击事件
|
||
searchTips.querySelectorAll('.search-tip-item').forEach(item => {
|
||
item.addEventListener('click', () => {
|
||
const location = {
|
||
name: item.dataset.name,
|
||
address: item.dataset.address,
|
||
coordinate: {
|
||
lng: parseFloat(item.dataset.lng),
|
||
lat: parseFloat(item.dataset.lat)
|
||
}
|
||
};
|
||
addLocation(location);
|
||
|
||
// 清理搜索框
|
||
document.getElementById('searchInput').value = '';
|
||
document.getElementById('clearSearch').style.display = 'none';
|
||
searchTips.classList.remove('active');
|
||
});
|
||
});
|
||
|
||
searchTips.classList.add('active');
|
||
}
|
||
|
||
// ========================================
|
||
// 地图点击添加位置
|
||
// ========================================
|
||
|
||
function handleMapClick(e) {
|
||
const lnglat = e.lnglat;
|
||
|
||
// 逆地理编码获取地址
|
||
AMap.plugin('AMap.Geocoder', () => {
|
||
const geocoder = new AMap.Geocoder();
|
||
|
||
geocoder.getAddress([lnglat.lng, lnglat.lat], (status, result) => {
|
||
if (status === 'complete' && result.info === 'OK') {
|
||
const address = result.regeocode.formattedAddress;
|
||
const location = {
|
||
name: `位置 ${state.locations.length + 1}`,
|
||
address: address,
|
||
coordinate: {
|
||
lng: lnglat.lng,
|
||
lat: lnglat.lat
|
||
}
|
||
};
|
||
addLocation(location);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// ========================================
|
||
// 位置管理
|
||
// ========================================
|
||
|
||
function addLocation(location) {
|
||
state.locations.push(location);
|
||
|
||
// 添加地图标记
|
||
const index = state.locations.length - 1;
|
||
const color = state.colors[index % state.colors.length];
|
||
|
||
const marker = new AMap.Marker({
|
||
position: [location.coordinate.lng, location.coordinate.lat],
|
||
content: `<div class="custom-marker" style="background: ${color}">${index + 1}</div>`,
|
||
offset: new AMap.Pixel(-18, -18)
|
||
});
|
||
|
||
marker.on('click', () => {
|
||
showInfoWindow(marker, location);
|
||
});
|
||
|
||
state.markers.push(marker);
|
||
state.map.add(marker);
|
||
|
||
// 调整视野
|
||
if (state.locations.length > 1) {
|
||
state.map.setFitView(state.markers);
|
||
} else {
|
||
state.map.setCenter([location.coordinate.lng, location.coordinate.lat]);
|
||
state.map.setZoom(14);
|
||
}
|
||
|
||
// 更新UI
|
||
updateLocationList();
|
||
updateSearchButton();
|
||
|
||
// 清除之前的搜索结果
|
||
clearSearchResults();
|
||
}
|
||
|
||
function removeLocation(index) {
|
||
// 移除标记
|
||
state.map.remove(state.markers[index]);
|
||
state.markers.splice(index, 1);
|
||
state.locations.splice(index, 1);
|
||
|
||
// 更新剩余标记的编号和颜色
|
||
state.markers.forEach((marker, i) => {
|
||
const color = state.colors[i % state.colors.length];
|
||
marker.setContent(`<div class="custom-marker" style="background: ${color}">${i + 1}</div>`);
|
||
});
|
||
|
||
// 更新UI
|
||
updateLocationList();
|
||
updateSearchButton();
|
||
|
||
// 调整视野
|
||
if (state.markers.length > 0) {
|
||
state.map.setFitView(state.markers);
|
||
}
|
||
|
||
// 清除之前的搜索结果
|
||
clearSearchResults();
|
||
}
|
||
|
||
function updateLocationList() {
|
||
const listEl = document.getElementById('locationList');
|
||
const countEl = document.getElementById('locationCount');
|
||
|
||
countEl.textContent = state.locations.length;
|
||
|
||
if (state.locations.length === 0) {
|
||
listEl.innerHTML = `
|
||
<li class="empty-state">
|
||
<span class="empty-icon">🗺️</span>
|
||
<span>还没有添加位置</span>
|
||
<span class="empty-hint">搜索地址或点击地图开始</span>
|
||
</li>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
listEl.innerHTML = state.locations.map((loc, index) => {
|
||
const color = state.colors[index % state.colors.length];
|
||
return `
|
||
<li class="location-item">
|
||
<div class="location-marker" style="background: ${color}">${index + 1}</div>
|
||
<div class="location-info">
|
||
<div class="location-name">${loc.name}</div>
|
||
<div class="location-address">${loc.address || '暂无地址'}</div>
|
||
</div>
|
||
<button class="location-remove" onclick="removeLocation(${index})">×</button>
|
||
</li>
|
||
`;
|
||
}).join('');
|
||
}
|
||
|
||
function updateSearchButton() {
|
||
const btn = document.getElementById('searchBtn');
|
||
btn.disabled = state.locations.length < 2;
|
||
}
|
||
|
||
// ========================================
|
||
// 搜索功能
|
||
// ========================================
|
||
|
||
async function handleSearch() {
|
||
const keywords = document.getElementById('poiKeywords').value.trim();
|
||
const radius = parseInt(document.getElementById('searchRadius').value);
|
||
|
||
if (!keywords) {
|
||
alert('请输入搜索关键词');
|
||
return;
|
||
}
|
||
|
||
if (state.locations.length < 2) {
|
||
alert('请至少添加2个位置');
|
||
return;
|
||
}
|
||
|
||
showLoading(true);
|
||
|
||
try {
|
||
// 1. 计算中心点
|
||
const centerResponse = await fetch('/api/center', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ locations: state.locations })
|
||
});
|
||
|
||
const centerData = await centerResponse.json();
|
||
state.center = centerData.center;
|
||
|
||
// 显示中心点标记
|
||
showCenterMarker();
|
||
|
||
// 2. 搜索周边POI
|
||
const searchResponse = await fetch('/api/search', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
center: state.center,
|
||
keywords: keywords,
|
||
radius: radius
|
||
})
|
||
});
|
||
|
||
const searchData = await searchResponse.json();
|
||
|
||
// 显示搜索结果
|
||
showSearchResults(searchData.pois, radius);
|
||
|
||
} catch (error) {
|
||
console.error('搜索失败:', error);
|
||
alert('搜索失败，请稍后重试');
|
||
} finally {
|
||
showLoading(false);
|
||
}
|
||
}
|
||
|
||
function showCenterMarker() {
|
||
// 移除旧的中心点标记
|
||
if (state.centerMarker) {
|
||
state.map.remove(state.centerMarker);
|
||
}
|
||
|
||
// 创建新的中心点标记
|
||
state.centerMarker = new AMap.Marker({
|
||
position: [state.center.lng, state.center.lat],
|
||
content: '<div class="center-marker">⭐</div>',
|
||
offset: new AMap.Pixel(-24, -24),
|
||
zIndex: 200
|
||
});
|
||
|
||
state.map.add(state.centerMarker);
|
||
|
||
// 显示中心点信息
|
||
document.getElementById('centerInfo').style.display = 'block';
|
||
}
|
||
|
||
function showSearchResults(pois, radius) {
|
||
// 清除旧的POI标记
|
||
clearPOIMarkers();
|
||
|
||
// 显示搜索范围圆
|
||
if (state.searchCircle) {
|
||
state.map.remove(state.searchCircle);
|
||
}
|
||
|
||
state.searchCircle = new AMap.Circle({
|
||
center: [state.center.lng, state.center.lat],
|
||
radius: radius,
|
||
fillColor: '#f59e0b',
|
||
fillOpacity: 0.1,
|
||
strokeColor: '#f59e0b',
|
||
strokeWeight: 2,
|
||
strokeOpacity: 0.6
|
||
});
|
||
|
||
state.map.add(state.searchCircle);
|
||
|
||
// 添加POI标记
|
||
pois.forEach((poi, index) => {
|
||
const marker = new AMap.Marker({
|
||
position: [poi.location.lng, poi.location.lat],
|
||
content: `<div class="poi-marker">${index + 1}</div>`,
|
||
offset: new AMap.Pixel(-16, -16),
|
||
zIndex: 100
|
||
});
|
||
|
||
marker.on('click', () => {
|
||
showPOIInfoWindow(marker, poi);
|
||
highlightResult(index);
|
||
});
|
||
|
||
state.poiMarkers.push(marker);
|
||
state.map.add(marker);
|
||
});
|
||
|
||
// 渲染结果列表
|
||
renderResultList(pois);
|
||
|
||
// 调整视野（右侧留出空间给浮动面板）
|
||
const allMarkers = [...state.markers, state.centerMarker, ...state.poiMarkers];
|
||
state.map.setFitView(allMarkers, false, [80, 420, 80, 80]);
|
||
}
|
||
|
||
function renderResultList(pois) {
|
||
const panel = document.getElementById('floatingResults');
|
||
const list = document.getElementById('floatingResultList');
|
||
const count = document.getElementById('floatingResultCount');
|
||
const filterInput = document.getElementById('resultFilter');
|
||
|
||
// 保存POI数据供筛选使用
|
||
state.currentPOIs = pois;
|
||
|
||
count.textContent = pois.length;
|
||
|
||
if (pois.length === 0) {
|
||
list.innerHTML = `
|
||
<li class="floating-result-empty">
|
||
<span class="icon">😕</span>
|
||
<span>未找到相关地点</span>
|
||
<span style="font-size: 0.8rem; opacity: 0.7;">尝试增大搜索半径或更换关键词</span>
|
||
</li>
|
||
`;
|
||
} else {
|
||
list.innerHTML = pois.map((poi, index) => {
|
||
const dist = parseDistance(poi.distance);
|
||
return `
|
||
<li class="floating-result-item" data-index="${index}" data-name="${poi.name}">
|
||
<div class="rank">${index + 1}</div>
|
||
<div class="info">
|
||
<div class="name">${poi.name}</div>
|
||
<div class="address">${poi.address || poi.type}</div>
|
||
${poi.tel ? `<div class="tel">📞 <a href="tel:${poi.tel}" onclick="event.stopPropagation()">${poi.tel}</a></div>` : ''}
|
||
</div>
|
||
<div class="distance-badge">
|
||
<span class="num">${dist.value}</span>
|
||
<span class="unit">${dist.unit}</span>
|
||
</div>
|
||
</li>
|
||
`}).join('');
|
||
|
||
// 绑定点击事件
|
||
list.querySelectorAll('.floating-result-item').forEach(item => {
|
||
item.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
const index = parseInt(item.dataset.index);
|
||
focusPOI(index);
|
||
});
|
||
});
|
||
}
|
||
|
||
panel.style.display = 'flex';
|
||
filterInput.value = '';
|
||
|
||
// 绑定关闭按钮事件
|
||
document.getElementById('closeFloatingResults').onclick = () => {
|
||
panel.style.display = 'none';
|
||
};
|
||
|
||
// 绑定筛选事件
|
||
filterInput.oninput = (e) => {
|
||
const keyword = e.target.value.trim().toLowerCase();
|
||
filterResults(keyword);
|
||
};
|
||
}
|
||
|
||
// 解析距离为数值和单位
|
||
function parseDistance(distance) {
|
||
const d = parseInt(distance);
|
||
if (d >= 1000) {
|
||
return { value: (d / 1000).toFixed(1), unit: '公里' };
|
||
}
|
||
return { value: d, unit: '米' };
|
||
}
|
||
|
||
// 筛选结果
|
||
function filterResults(keyword) {
|
||
const items = document.querySelectorAll('.floating-result-item');
|
||
let visibleCount = 0;
|
||
|
||
items.forEach(item => {
|
||
const name = item.dataset.name?.toLowerCase() || '';
|
||
const address = item.querySelector('.address')?.textContent.toLowerCase() || '';
|
||
|
||
if (!keyword || name.includes(keyword) || address.includes(keyword)) {
|
||
item.classList.remove('hidden');
|
||
visibleCount++;
|
||
} else {
|
||
item.classList.add('hidden');
|
||
}
|
||
});
|
||
|
||
// 更新显示数量
|
||
document.getElementById('floatingResultCount').textContent = visibleCount;
|
||
}
|
||
|
||
function formatDistance(distance) {
|
||
const d = parseInt(distance);
|
||
if (d >= 1000) {
|
||
return (d / 1000).toFixed(1) + ' 公里';
|
||
}
|
||
return d + ' 米';
|
||
}
|
||
|
||
function focusPOI(index) {
|
||
const marker = state.poiMarkers[index];
|
||
const poi = state.currentPOIs[index];
|
||
|
||
if (marker && poi) {
|
||
// 先高亮结果
|
||
highlightResult(index);
|
||
|
||
// 关闭当前信息窗口
|
||
state.infoWindow.close();
|
||
|
||
// 使用 panTo 平滑移动到目标位置
|
||
const position = marker.getPosition();
|
||
state.map.panTo(position);
|
||
|
||
// 延迟设置缩放和打开信息窗口，确保地图移动完成
|
||
setTimeout(() => {
|
||
state.map.setZoom(16);
|
||
showPOIInfoWindow(marker, poi);
|
||
}, 300);
|
||
}
|
||
}
|
||
|
||
function highlightResult(index) {
|
||
document.querySelectorAll('.floating-result-item').forEach((item, i) => {
|
||
item.classList.toggle('active', i === index);
|
||
});
|
||
|
||
// 滚动到对应项
|
||
const activeItem = document.querySelector(`.floating-result-item[data-index="${index}"]`);
|
||
if (activeItem) {
|
||
activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||
}
|
||
}
|
||
|
||
// ========================================
|
||
// 信息窗口
|
||
// ========================================
|
||
|
||
function showInfoWindow(marker, location) {
|
||
const content = `
|
||
<div class="info-window">
|
||
<h3>${location.name}</h3>
|
||
<p>${location.address || '暂无地址'}</p>
|
||
</div>
|
||
`;
|
||
|
||
state.infoWindow.setContent(content);
|
||
state.infoWindow.open(state.map, marker.getPosition());
|
||
}
|
||
|
||
function showPOIInfoWindow(marker, poi) {
|
||
const distText = formatDistance(poi.distance);
|
||
const navUrl = `https://uri.amap.com/navigation?to=${poi.location.lng},${poi.location.lat},${encodeURIComponent(poi.name)}&mode=car&coordinate=gaode`;
|
||
|
||
const content = `
|
||
<div class="info-window">
|
||
<h3>${poi.name}</h3>
|
||
<p class="distance">🎯 距中心点: ${distText}</p>
|
||
${poi.address ? `<p>📍 ${poi.address}</p>` : ''}
|
||
${poi.tel ? `<p class="tel">📞 <a href="tel:${poi.tel}">${poi.tel}</a></p>` : ''}
|
||
<a href="${navUrl}" target="_blank" class="nav-btn">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71L12 2z"/>
|
||
</svg>
|
||
导航前往
|
||
</a>
|
||
</div>
|
||
`;
|
||
|
||
state.infoWindow.setContent(content);
|
||
state.infoWindow.open(state.map, marker.getPosition());
|
||
}
|
||
|
||
// ========================================
|
||
// 工具函数
|
||
// ========================================
|
||
|
||
function clearSearchResults() {
|
||
// 隐藏结果区域
|
||
document.getElementById('floatingResults').style.display = 'none';
|
||
document.getElementById('centerInfo').style.display = 'none';
|
||
document.getElementById('resultFilter').value = '';
|
||
|
||
// 清除标记
|
||
clearPOIMarkers();
|
||
|
||
if (state.centerMarker) {
|
||
state.map.remove(state.centerMarker);
|
||
state.centerMarker = null;
|
||
}
|
||
|
||
if (state.searchCircle) {
|
||
state.map.remove(state.searchCircle);
|
||
state.searchCircle = null;
|
||
}
|
||
|
||
state.center = null;
|
||
state.currentPOIs = [];
|
||
}
|
||
|
||
function clearPOIMarkers() {
|
||
state.poiMarkers.forEach(marker => {
|
||
state.map.remove(marker);
|
||
});
|
||
state.poiMarkers = [];
|
||
}
|
||
|
||
function showLoading(show) {
|
||
document.getElementById('loadingOverlay').style.display = show ? 'flex' : 'none';
|
||
}
|
||
|
||
// ========================================
|
||
// 暴露全局函数
|
||
// ========================================
|
||
|
||
window.removeLocation = removeLocation;
|
||
window.focusPOI = focusPOI;
|