frontend/assets/js/map.js - master - hellok1tta/html-css

frontend/assets/js/map.js
114 строк4 KB
hellok1tta
upload files
20 дек 2025, 12:41
20 дек 2025, 12:41b528fd7
class CoffeeMap {
    constructor() {
        this.map = null;
        this.markers = [];
        this.userMarker = null;
    }

    init() {
        this.initMap();
        this.loadShops();
        this.setupEventListeners();
    }


    initMap() {
        this.map = L.map('map').setView([47.222, 39.718], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);
    }

    // загрузка данных о кофейнях с сервера
    async loadShops() {
        try {
            const response = await fetch('/api/shops');
            const data = await response.json();
            if (data.success) this.addShopMarkers(data.data);
        } catch (error) {
            console.error('Ошибка загрузки магазинов:', error);
        }
    }

    // добавление маркеров кофеен на карту
    addShopMarkers(shops) {
        this.clearMarkers();
        
        shops.filter(shop => shop.latitude && shop.longitude).forEach(shop => {
            const marker = L.marker([shop.latitude, shop.longitude])
                .addTo(this.map)
                .bindPopup(this.createPopupContent(shop));
            this.markers.push(marker);
        });

        this.fitMapToMarkers();
    }

    // HTML для popup маркера
    createPopupContent(shop) {
        return `
            <div class="shop-popup">
                <h3>Кофейня Heaven</h3>
                <p>${shop.address}</p>
                ${shop.phone ? `<p>${shop.phone}</p>` : ''}
                <button onclick="window.location.href='contacts.html'" class="popup-btn">
                    Подробнее
                </button>
            </div>
        `;
    }

    // очистка всех маркеров с карты
    clearMarkers() {
        this.markers.forEach(marker => this.map.removeLayer(marker));
        this.markers = [];
    }

    // подгонка карты чтобы были видны все маркеры
    fitMapToMarkers() {
        if (this.markers.length > 0) {
            const group = L.featureGroup(this.markers);
            this.map.fitBounds(group.getBounds().pad(0.1));
        }
    }

    // настройка обработчиков событий для элементов управления картой
    setupEventListeners() {
        document.getElementById('locateMe').addEventListener('click', () => this.locateUser());
        document.getElementById('showAllShops').addEventListener('click', () => this.showAllShops());
    }

    // определение текущего местоположения пользователя
    locateUser() {
        if (!navigator.geolocation) {
            alert('Геолокация не поддерживается вашим браузером');
            return;
        }

        navigator.geolocation.getCurrentPosition(
            (position) => this.handleLocationSuccess(position),
            () => alert('Не удалось определить ваше местоположение')
        );
    }

    // обработка получения местоположения
    handleLocationSuccess(position) {
        const { latitude, longitude } = position.coords;
        
        this.userMarker = L.marker([latitude, longitude])
            .addTo(this.map)
            .bindPopup('📍 Вы здесь')
            .openPopup();

        this.map.setView([latitude, longitude], 15);
        this.showNearestShops(latitude, longitude);
    }

    showAllShops() {
        this.fitMapToMarkers();
    }

    showNearestShops(userLat, userLng) {
        console.log('Поиск ближайших кофеен к:', userLat, userLng);
    }
}

document.addEventListener('DOMContentLoaded', () => new CoffeeMap().init());