97 lines
2.9 KiB
JavaScript
97 lines
2.9 KiB
JavaScript
// 地图与景点标注逻辑
|
|
(function () {
|
|
// 初始化地图：默认定位到中国杭州
|
|
const map = L.map('map').setView([30.2741, 120.1551], 11);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© OpenStreetMap'
|
|
}).addTo(map);
|
|
|
|
// 保存所有标注：{ id, name, lat, lng, status: 'visited' | 'wish' }
|
|
let spots = [];
|
|
const markers = {}; // id -> L.Marker
|
|
|
|
// 根据状态生成不同颜色图标
|
|
function makeIcon(status) {
|
|
const color = status === 'visited' ? '#16a34a' : '#f59e0b';
|
|
return L.divIcon({
|
|
className: '',
|
|
html: `<div style="background:${color};width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 4px rgba(0,0,0,.4)"></div>`,
|
|
iconSize: [16, 16],
|
|
iconAnchor: [8, 8]
|
|
});
|
|
}
|
|
|
|
function renderSpot(spot) {
|
|
if (markers[spot.id]) {
|
|
map.removeLayer(markers[spot.id]);
|
|
}
|
|
const marker = L.marker([spot.lat, spot.lng], { icon: makeIcon(spot.status) }).addTo(map);
|
|
marker.bindPopup(
|
|
`<b>${spot.name}</b><br/>状态：${spot.status === 'visited' ? '去过 ✅' : '想去 ⭐'}<br/>` +
|
|
`<button data-id="${spot.id}" class="popup-toggle">切换状态</button>`
|
|
);
|
|
markers[spot.id] = marker;
|
|
}
|
|
|
|
function renderAll() {
|
|
// 清除旧 marker
|
|
Object.values(markers).forEach(m => map.removeLayer(m));
|
|
Object.keys(markers).forEach(k => delete markers[k]);
|
|
spots.forEach(renderSpot);
|
|
}
|
|
|
|
// 地图点击添加新景点
|
|
map.on('click', function (e) {
|
|
const user = window.Auth.currentUser();
|
|
if (!user) {
|
|
alert('请先登录后再添加景点标注');
|
|
return;
|
|
}
|
|
const name = prompt('请输入景点名称：');
|
|
if (!name) return;
|
|
const spot = {
|
|
id: 's_' + Date.now() + '_' + Math.floor(Math.random() * 1000),
|
|
name: name.trim(),
|
|
lat: e.latlng.lat,
|
|
lng: e.latlng.lng,
|
|
status: 'wish'
|
|
};
|
|
spots.push(spot);
|
|
renderSpot(spot);
|
|
window.MapAPI.onSpotsChange(spots);
|
|
});
|
|
|
|
// 弹窗内切换状态
|
|
map.on('popupopen', function (e) {
|
|
const btn = e.popup.getElement().querySelector('.popup-toggle');
|
|
if (!btn) return;
|
|
btn.addEventListener('click', function () {
|
|
const id = btn.getAttribute('data-id');
|
|
const spot = spots.find(s => s.id === id);
|
|
if (!spot) return;
|
|
spot.status = spot.status === 'visited' ? 'wish' : 'visited';
|
|
renderSpot(spot);
|
|
window.MapAPI.onSpotsChange(spots);
|
|
map.closePopup();
|
|
});
|
|
});
|
|
|
|
// 对外暴露的 API
|
|
window.MapAPI = {
|
|
getMap: () => map,
|
|
getSpots: () => spots,
|
|
setSpots(newSpots) {
|
|
spots = newSpots || [];
|
|
renderAll();
|
|
},
|
|
// 由 main.js 覆盖，用于同步到 UI 和存储
|
|
onSpotsChange: function () {},
|
|
// 定位到坐标
|
|
flyTo(lat, lng, zoom) {
|
|
map.flyTo([lat, lng], zoom || 12);
|
|
}
|
|
};
|
|
})();
|