114 lines
4.7 KiB
HTML
114 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Простая карта учебных заведений - 2GIS</title>
|
||
<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full&key=f61cfc4b-55b7-4937-8625-c00932bee844"></script>
|
||
<style>
|
||
body { margin: 0; font-family: Arial, sans-serif; }
|
||
#map { width: 100%; height: 100vh; }
|
||
.info {
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 10px;
|
||
background: rgba(255,255,255,0.9);
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
z-index: 1000;
|
||
max-width: 300px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||
}
|
||
.status {
|
||
margin-bottom: 10px;
|
||
padding: 5px 10px;
|
||
border-radius: 5px;
|
||
font-weight: bold;
|
||
}
|
||
.success { background: #d4edda; color: #155724; }
|
||
.error { background: #f8d7da; color: #721c24; }
|
||
.loading { background: #cce7ff; color: #004085; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="info">
|
||
<h3>🎓 Карта ВУЗов и колледжей</h3>
|
||
<div id="status" class="status loading">Загрузка...</div>
|
||
<div id="counter">Учреждений на карте: 0</div>
|
||
</div>
|
||
<div id="map"></div>
|
||
|
||
<script>
|
||
const statusDiv = document.getElementById('status');
|
||
const counterDiv = document.getElementById('counter');
|
||
|
||
function updateStatus(message, type = 'loading') {
|
||
statusDiv.innerHTML = message;
|
||
statusDiv.className = `status ${type}`;
|
||
console.log(message);
|
||
}
|
||
|
||
function updateCounter(count) {
|
||
counterDiv.innerHTML = `Учреждений на карте: ${count}`;
|
||
}
|
||
|
||
// Упрощенные данные для тестирования
|
||
const testInstitutions = [
|
||
{ name: "ЮУрГУ", lat: 55.1549, lng: 61.4289, address: "пр. Ленина, 76" },
|
||
{ name: "ЧелГУ", lat: 55.1605, lng: 61.4025, address: "ул. Братьев Кашириных, 129" },
|
||
{ name: "ЧГПУ", lat: 55.1545, lng: 61.4267, address: "пр. Ленина, 69" },
|
||
{ name: "УралГУФК", lat: 55.1674, lng: 61.3988, address: "ул. Орджоникидзе, 1" },
|
||
{ name: "Медицинский колледж", lat: 55.1901, lng: 61.3164, address: "ул. Свободы, 159а" }
|
||
];
|
||
|
||
updateStatus('Инициализация 2GIS API...');
|
||
|
||
DG.then(function() {
|
||
updateStatus('✅ 2GIS API загружен', 'success');
|
||
|
||
try {
|
||
// Создаем карту
|
||
const map = DG.map('map', {
|
||
center: [55.1644, 61.4291],
|
||
zoom: 11
|
||
});
|
||
|
||
updateStatus('✅ Карта создана', 'success');
|
||
|
||
let markerCount = 0;
|
||
|
||
// Добавляем маркеры
|
||
testInstitutions.forEach(function(institution) {
|
||
try {
|
||
const marker = DG.marker([institution.lat, institution.lng])
|
||
.addTo(map)
|
||
.bindPopup(`
|
||
<div style="min-width: 200px;">
|
||
<h4 style="margin: 0 0 8px 0;">${institution.name}</h4>
|
||
<p style="margin: 0; color: #666;">📍 ${institution.address}</p>
|
||
</div>
|
||
`);
|
||
|
||
markerCount++;
|
||
console.log(`Добавлен маркер: ${institution.name}`);
|
||
|
||
} catch (error) {
|
||
console.error(`Ошибка добавления маркера ${institution.name}:`, error);
|
||
}
|
||
});
|
||
|
||
updateCounter(markerCount);
|
||
updateStatus(`✅ Готово! Добавлено ${markerCount} маркеров`, 'success');
|
||
|
||
} catch (error) {
|
||
updateStatus('❌ Ошибка создания карты: ' + error.message, 'error');
|
||
console.error('Подробная ошибка:', error);
|
||
}
|
||
|
||
}).catch(function(error) {
|
||
updateStatus('❌ Ошибка загрузки API: ' + error.message, 'error');
|
||
console.error('Ошибка DG.then:', error);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |