1086 lines
36 KiB
JavaScript
1086 lines
36 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();
|
||
initMobileUI();
|
||
});
|
||
|
||
// ========================================
|
||
// 移动端UI初始化
|
||
// ========================================
|
||
|
||
function initMobileUI() {
|
||
const sidebar = document.getElementById('sidebar');
|
||
const overlay = document.getElementById('sidebarOverlay');
|
||
const menuBtn = document.getElementById('menuBtn');
|
||
const mobileSearchBtn = document.getElementById('mobileSearchBtn');
|
||
const mobileActionBar = document.getElementById('mobileActionBar');
|
||
const mobileSearchInput = document.getElementById('mobileSearchInput');
|
||
const mobileSearchClear = document.getElementById('mobileSearchClear');
|
||
const mobileSearchTips = document.getElementById('mobileSearchTips');
|
||
const floatingResultBtn = document.getElementById('floatingResultBtn');
|
||
const floatingResultBadge = document.getElementById('floatingResultBadge');
|
||
|
||
if (!sidebar || !overlay) return;
|
||
|
||
// 切换侧边栏
|
||
function toggleSidebar() {
|
||
sidebar.classList.toggle('active');
|
||
overlay.classList.toggle('active');
|
||
// 打开侧边栏时隐藏浮动按钮
|
||
if (sidebar.classList.contains('active') && floatingResultBtn) {
|
||
floatingResultBtn.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// 关闭侧边栏
|
||
function closeSidebar() {
|
||
sidebar.classList.remove('active');
|
||
overlay.classList.remove('active');
|
||
// 关闭侧边栏时，如果有搜索结果且结果面板隐藏，显示浮动按钮
|
||
const panel = document.getElementById('floatingResults');
|
||
if (floatingResultBtn && state.currentPOIs && state.currentPOIs.length > 0 &&
|
||
(!panel || panel.style.display === 'none')) {
|
||
window.showFloatingResultBtn(state.currentPOIs.length);
|
||
}
|
||
}
|
||
|
||
// 菜单按钮点击
|
||
if (menuBtn) {
|
||
menuBtn.addEventListener('click', toggleSidebar);
|
||
}
|
||
|
||
// 遮罩点击关闭
|
||
overlay.addEventListener('click', closeSidebar);
|
||
|
||
// 移动端搜索按钮
|
||
if (mobileSearchBtn) {
|
||
mobileSearchBtn.addEventListener('click', handleSearch);
|
||
}
|
||
|
||
// 移动端地址搜索
|
||
if (mobileSearchInput) {
|
||
let searchTimeout;
|
||
|
||
mobileSearchInput.addEventListener('input', (e) => {
|
||
const value = e.target.value.trim();
|
||
mobileSearchClear.style.display = value ? 'block' : 'none';
|
||
|
||
clearTimeout(searchTimeout);
|
||
if (value.length >= 2) {
|
||
searchTimeout = setTimeout(() => fetchMobileSearchTips(value), 300);
|
||
} else {
|
||
mobileSearchTips.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
mobileSearchInput.addEventListener('focus', () => {
|
||
if (mobileSearchInput.value.trim().length >= 2) {
|
||
mobileSearchTips.classList.add('active');
|
||
}
|
||
});
|
||
|
||
mobileSearchClear.addEventListener('click', () => {
|
||
mobileSearchInput.value = '';
|
||
mobileSearchClear.style.display = 'none';
|
||
mobileSearchTips.classList.remove('active');
|
||
});
|
||
|
||
// 点击外部关闭搜索提示
|
||
document.addEventListener('click', (e) => {
|
||
if (!e.target.closest('.mobile-search-bar')) {
|
||
mobileSearchTips.classList.remove('active');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 浮动结果按钮点击 - 重新打开结果面板
|
||
if (floatingResultBtn) {
|
||
floatingResultBtn.addEventListener('click', () => {
|
||
const panel = document.getElementById('floatingResults');
|
||
if (panel && state.currentPOIs.length > 0) {
|
||
panel.style.display = 'flex';
|
||
floatingResultBtn.style.display = 'none';
|
||
if (mobileActionBar) {
|
||
mobileActionBar.style.display = 'none';
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 点击搜索结果后自动关闭侧边栏（移动端）
|
||
window.closeSidebarOnMobile = function() {
|
||
if (window.innerWidth <= 768) {
|
||
closeSidebar();
|
||
}
|
||
};
|
||
|
||
// 隐藏/显示移动端操作栏
|
||
window.toggleMobileActionBar = function(show) {
|
||
if (mobileActionBar && window.innerWidth <= 768) {
|
||
mobileActionBar.style.display = show ? 'flex' : 'none';
|
||
}
|
||
};
|
||
|
||
// 显示浮动结果按钮
|
||
window.showFloatingResultBtn = function(count) {
|
||
if (floatingResultBtn) {
|
||
// 清除所有内联样式，让CSS控制
|
||
floatingResultBtn.style.cssText = 'display: flex;';
|
||
if (floatingResultBadge) {
|
||
floatingResultBadge.textContent = count;
|
||
}
|
||
console.log('显示浮动结果按钮，数量:', count);
|
||
}
|
||
};
|
||
|
||
// 隐藏浮动结果按钮
|
||
window.hideFloatingResultBtn = function() {
|
||
if (floatingResultBtn) {
|
||
floatingResultBtn.style.display = 'none';
|
||
}
|
||
};
|
||
|
||
// 监听窗口大小变化
|
||
window.addEventListener('resize', () => {
|
||
if (window.innerWidth > 768) {
|
||
closeSidebar();
|
||
if (mobileActionBar) {
|
||
mobileActionBar.style.display = 'none';
|
||
}
|
||
if (floatingResultBtn) {
|
||
floatingResultBtn.style.display = 'none';
|
||
}
|
||
} else {
|
||
const floatingResults = document.getElementById('floatingResults');
|
||
const resultsHidden = !floatingResults || floatingResults.style.display === 'none';
|
||
|
||
if (mobileActionBar && resultsHidden) {
|
||
mobileActionBar.style.display = 'flex';
|
||
}
|
||
|
||
// 如果有搜索结果且结果面板隐藏，显示浮动按钮
|
||
if (resultsHidden && state.currentPOIs && state.currentPOIs.length > 0) {
|
||
window.showFloatingResultBtn(state.currentPOIs.length);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 移动端地址搜索提示
|
||
async function fetchMobileSearchTips(keywords) {
|
||
const mobileSearchTips = document.getElementById('mobileSearchTips');
|
||
|
||
try {
|
||
const response = await fetch(`/api/tips?keywords=${encodeURIComponent(keywords)}&city=`);
|
||
const data = await response.json();
|
||
|
||
if (data.tips && data.tips.length > 0) {
|
||
renderMobileSearchTips(data.tips);
|
||
} else {
|
||
mobileSearchTips.classList.remove('active');
|
||
}
|
||
} catch (error) {
|
||
console.error('获取搜索提示失败:', error);
|
||
}
|
||
}
|
||
|
||
function renderMobileSearchTips(tips) {
|
||
const mobileSearchTips = document.getElementById('mobileSearchTips');
|
||
const mobileSearchInput = document.getElementById('mobileSearchInput');
|
||
const mobileSearchClear = document.getElementById('mobileSearchClear');
|
||
|
||
mobileSearchTips.innerHTML = tips.map(tip => `
|
||
<div class="mobile-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="tip-name">${tip.name}</div>
|
||
<div class="tip-address">${tip.district}${tip.address}</div>
|
||
</div>
|
||
`).join('');
|
||
|
||
// 绑定点击事件
|
||
mobileSearchTips.querySelectorAll('.mobile-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);
|
||
|
||
// 清理搜索框
|
||
mobileSearchInput.value = '';
|
||
mobileSearchClear.style.display = 'none';
|
||
mobileSearchTips.classList.remove('active');
|
||
});
|
||
});
|
||
|
||
mobileSearchTips.classList.add('active');
|
||
}
|
||
|
||
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);
|
||
|
||
// 先IP定位快速显示，再尝试精确定位
|
||
AMap.plugin(['AMap.CitySearch', 'AMap.Geolocation'], () => {
|
||
// 1. 先IP定位（快速）
|
||
const citySearch = new AMap.CitySearch();
|
||
citySearch.getLocalCity((status, result) => {
|
||
if (status === 'complete' && result.info === 'OK') {
|
||
const bounds = result.bounds;
|
||
if (bounds) {
|
||
state.map.setBounds(bounds);
|
||
}
|
||
console.log('IP定位成功，城市:', result.city);
|
||
}
|
||
});
|
||
|
||
// 2. 然后尝试精确定位（较慢但更准确）
|
||
const geolocation = new AMap.Geolocation({
|
||
enableHighAccuracy: true,
|
||
timeout: 10000,
|
||
buttonPosition: 'RB',
|
||
buttonOffset: new AMap.Pixel(10, 20),
|
||
zoomToAccuracy: true
|
||
});
|
||
|
||
// 添加定位控件到地图
|
||
state.map.addControl(geolocation);
|
||
|
||
geolocation.getCurrentPosition((status, result) => {
|
||
if (status === 'complete' && result.position) {
|
||
state.map.setCenter(result.position);
|
||
state.map.setZoom(15);
|
||
console.log('精确定位成功:', result.formattedAddress);
|
||
} else {
|
||
console.log('精确定位失败，使用IP定位结果');
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// ========================================
|
||
// 事件绑定
|
||
// ========================================
|
||
|
||
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');
|
||
}
|
||
|
||
// ========================================
|
||
// 地图点击添加位置
|
||
// ========================================
|
||
|
||
// 待确认的位置
|
||
let pendingLocation = null;
|
||
|
||
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 showMapClickConfirm(address) {
|
||
const confirmDialog = document.getElementById('mapClickConfirm');
|
||
const confirmAddress = document.getElementById('confirmAddress');
|
||
const confirmOk = document.getElementById('confirmOk');
|
||
const confirmCancel = document.getElementById('confirmCancel');
|
||
|
||
if (!confirmDialog) return;
|
||
|
||
confirmAddress.textContent = address;
|
||
confirmDialog.style.display = 'flex';
|
||
|
||
// 确认添加
|
||
confirmOk.onclick = () => {
|
||
if (pendingLocation) {
|
||
addLocation(pendingLocation);
|
||
pendingLocation = null;
|
||
}
|
||
confirmDialog.style.display = 'none';
|
||
};
|
||
|
||
// 取消
|
||
confirmCancel.onclick = () => {
|
||
pendingLocation = null;
|
||
confirmDialog.style.display = 'none';
|
||
};
|
||
|
||
// 点击背景关闭
|
||
confirmDialog.onclick = (e) => {
|
||
if (e.target === confirmDialog) {
|
||
pendingLocation = null;
|
||
confirmDialog.style.display = 'none';
|
||
}
|
||
};
|
||
}
|
||
|
||
// ========================================
|
||
// 位置管理
|
||
// ========================================
|
||
|
||
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');
|
||
const mobileBtn = document.getElementById('mobileSearchBtn');
|
||
const mobileCount = document.getElementById('mobileLocationCount');
|
||
|
||
const count = state.locations.length;
|
||
const disabled = count < 2;
|
||
btn.disabled = disabled;
|
||
|
||
if (mobileBtn) {
|
||
mobileBtn.disabled = disabled;
|
||
// 更新按钮文字显示当前状态
|
||
if (count === 0) {
|
||
mobileBtn.textContent = '🔍 搜索会面点';
|
||
} else if (count === 1) {
|
||
mobileBtn.textContent = '🔍 再添加1个位置';
|
||
} else {
|
||
mobileBtn.textContent = '🔍 搜索会面点';
|
||
}
|
||
}
|
||
if (mobileCount) {
|
||
mobileCount.textContent = count;
|
||
}
|
||
}
|
||
|
||
// ========================================
|
||
// 搜索功能
|
||
// ========================================
|
||
|
||
async function handleSearch() {
|
||
const keywords = document.getElementById('poiKeywords').value.trim();
|
||
const radius = parseInt(document.getElementById('searchRadius').value);
|
||
|
||
if (!keywords) {
|
||
// 自动打开侧边栏设置面板
|
||
const sidebar = document.getElementById('sidebar');
|
||
const overlay = document.getElementById('sidebarOverlay');
|
||
if (sidebar && window.innerWidth <= 768) {
|
||
sidebar.classList.add('active');
|
||
if (overlay) overlay.classList.add('active');
|
||
}
|
||
// 聚焦到关键词输入框
|
||
const poiInput = document.getElementById('poiKeywords');
|
||
if (poiInput) {
|
||
poiInput.focus();
|
||
poiInput.setAttribute('placeholder', '⚠️ 请选择或输入搜索类型...');
|
||
// 3秒后恢复原来的placeholder
|
||
setTimeout(() => {
|
||
poiInput.setAttribute('placeholder', '例如：咖啡馆、餐厅、KTV...');
|
||
}, 3000);
|
||
}
|
||
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);
|
||
|
||
// 移动端自动关闭侧边栏
|
||
if (window.closeSidebarOnMobile) {
|
||
window.closeSidebarOnMobile();
|
||
}
|
||
|
||
} 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 style="display:flex;flex-direction:column;align-items:center;padding:32px;color:#64748b;text-align:center;">
|
||
<span style="font-size:2.5rem;opacity:0.5;">😕</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);
|
||
const rankColors = [
|
||
'background:linear-gradient(135deg,#ffd700,#ffb800);color:#0f0f1a',
|
||
'background:linear-gradient(135deg,#c0c0c0,#a0a0a0);color:#0f0f1a',
|
||
'background:linear-gradient(135deg,#cd7f32,#b87333);color:#0f0f1a'
|
||
];
|
||
const rankBg = rankColors[index] || 'background:#16213e;color:#64748b';
|
||
|
||
return `<li data-index="${index}" data-name="${poi.name}" onclick="focusPOI(${index})" style="
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 12px;
|
||
margin-bottom: 8px;
|
||
background: #0a0a12;
|
||
border: 1px solid #2d2d44;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
">
|
||
<span style="
|
||
flex-shrink: 0;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 700;
|
||
font-size: 0.85rem;
|
||
margin-right: 12px;
|
||
${rankBg};
|
||
">${index + 1}</span>
|
||
<span style="
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
margin-right: 10px;
|
||
">
|
||
<span style="display:block;font-weight:600;font-size:0.95rem;color:#f8fafc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${poi.name}</span>
|
||
<span style="display:block;font-size:0.8rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${poi.address || poi.type}</span>
|
||
${poi.tel ? `<span style="display:block;font-size:0.8rem;color:#3b82f6;">📞 ${poi.tel}</span>` : ''}
|
||
</span>
|
||
<span style="
|
||
flex-shrink: 0;
|
||
width: 55px;
|
||
padding: 6px 4px;
|
||
text-align: center;
|
||
background: rgba(16,185,129,0.12);
|
||
border-radius: 6px;
|
||
border: 1px solid rgba(16,185,129,0.25);
|
||
">
|
||
<span style="display:block;font-size:1rem;font-weight:700;color:#10b981;">${dist.value}</span>
|
||
<span style="display:block;font-size:0.7rem;color:#10b981;">${dist.unit}</span>
|
||
</span>
|
||
</li>`;
|
||
}).join('');
|
||
|
||
// 点击事件已通过 onclick 内联绑定
|
||
}
|
||
|
||
panel.style.display = 'flex';
|
||
filterInput.value = '';
|
||
|
||
// 隐藏浮动结果按钮（因为结果面板已显示）
|
||
if (window.hideFloatingResultBtn) {
|
||
window.hideFloatingResultBtn();
|
||
}
|
||
|
||
// 移动端隐藏操作栏
|
||
if (window.toggleMobileActionBar) {
|
||
window.toggleMobileActionBar(false);
|
||
}
|
||
|
||
// 绑定关闭按钮事件
|
||
document.getElementById('closeFloatingResults').onclick = () => {
|
||
panel.style.display = 'none';
|
||
// 移动端显示操作栏和浮动结果按钮
|
||
if (window.toggleMobileActionBar) {
|
||
window.toggleMobileActionBar(true);
|
||
}
|
||
if (window.showFloatingResultBtn && state.currentPOIs.length > 0) {
|
||
window.showFloatingResultBtn(state.currentPOIs.length);
|
||
}
|
||
};
|
||
|
||
// 绑定筛选事件
|
||
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);
|
||
|
||
// 移动端：关闭结果面板，显示浮动按钮
|
||
if (window.innerWidth <= 768) {
|
||
const panel = document.getElementById('floatingResults');
|
||
if (panel) {
|
||
panel.style.display = 'none';
|
||
}
|
||
if (window.showFloatingResultBtn) {
|
||
window.showFloatingResultBtn(state.currentPOIs.length);
|
||
}
|
||
if (window.toggleMobileActionBar) {
|
||
window.toggleMobileActionBar(true);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
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 = '';
|
||
|
||
// 移动端显示操作栏，隐藏浮动按钮
|
||
if (window.toggleMobileActionBar) {
|
||
window.toggleMobileActionBar(true);
|
||
}
|
||
if (window.hideFloatingResultBtn) {
|
||
window.hideFloatingResultBtn();
|
||
}
|
||
|
||
// 清除标记
|
||
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;
|