Skip to content

QUICK_START.md

Latest commit

 

History

History
144 lines (109 loc) · 5.23 KB

QUICK_START.md

File metadata and controls

144 lines (109 loc) · 5.23 KB

🚀 Быстрый запуск Яндекс Карт

⚡ Мгновенный старт

1. Получите API ключ

  • Перейдите на Яндекс.Разработчики
  • Создайте приложение и получите API ключ
  • Замените YOUR_API_KEY в index.html на ваш ключ

2. Запустите сервер

Windows (простой способ):

# Дважды кликните на файл
start-server.bat

Windows PowerShell:

# Запустите PowerShell от имени администратора
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
.\start-server.ps1

Ручной запуск:

# Python 3
python -m http.server 8000

# Или Node.js
npx http-server

# Или PHP
php -S localhost:8000

3. Откройте в браузере

Перейдите по адресу: http://localhost:8000

🎯 Что вы получите

✅ Интерактивная карта с центром в Москве
✅ 6 базовых кнопок для управления картой
✅ 4 дополнительных примера для изучения API
✅ Красивый адаптивный интерфейс
✅ Полная документация и примеры кода

🔧 Основные функции

Кнопка Функция
🎯 Добавить маркер Создает случайный маркер на карте
🔷 Добавить полигон Рисует цветной многоугольник
➖ Добавить линию Создает линию между точками
🗑️ Очистить все Удаляет все объекты с карты
📍 Получить центр Показывает координаты центра карты
🔍 Установить зум Устанавливает случайный уровень зума

🚀 Дополнительные примеры

После загрузки карты появятся новые кнопки:

Кнопка Функция
🔍 Поиск адреса Поиск и центрирование по адресу
📏 Измерить расстояние Расчет расстояния Москва-СПб
🛣️ Создать маршрут Маршрут по центру Москвы
🎯 Кластеризация 50 маркеров с группировкой

💻 Использование в консоли

Откройте Developer Tools (F12) и используйте:

// Базовые функции
window.mapKit.addRandomMarker()
window.mapKit.addRandomPolygon()
window.mapKit.clearAll()

// Примеры
window.searchAddressExample()
window.distanceExample()
window.routeExample()
window.clusteringExample()

// Утилиты
window.calculateDistance([55.7558, 37.6176], [59.9311, 30.3609])
window.createCircle([55.7558, 37.6176], 5000)

🎨 Кастомизация

Изменение центра карты:

// В config.js
map: {
    defaultCenter: [59.9311, 30.3609], // Санкт-Петербург
    defaultZoom: 12
}

Добавление новых элементов управления:

// В examples.js
function addCustomButton() {
    const button = document.createElement('button');
    button.textContent = 'Моя функция';
    button.onclick = () => alert('Привет!');
    document.querySelector('.controls').appendChild(button);
}

🚨 Решение проблем

Карта не загружается:

  • ✅ Проверьте API ключ
  • ✅ Используйте локальный сервер (не открывайте файл напрямую)
  • ✅ Проверьте консоль браузера на ошибки

Функции не работают:

  • ✅ Дождитесь полной загрузки карты
  • ✅ Проверьте статус window.mapKit.isInitialized

Ошибки CORS:

  • ✅ Используйте локальный веб-сервер
  • ✅ Не открывайте index.html напрямую в браузере

📚 Следующие шаги

  1. Изучите код в mapkit.js - основной API
  2. Посмотрите примеры в examples.js - практическое применение
  3. Настройте конфигурацию в config.js - кастомизация
  4. Используйте утилиты в utils.js - геопространственные вычисления
  5. Создайте свой проект на основе этого кода

🎉 Готово!

Теперь у вас есть полноценный API для работы с Яндекс Картами!

Создавайте маркеры, рисуйте полигоны, измеряйте расстояния и многое другое!

Нужна помощь? Откройте README.md для подробной документации.