|
| 1 | +# 🚀 Быстрый запуск Яндекс Карт |
| 2 | + |
| 3 | +## ⚡ Мгновенный старт |
| 4 | + |
| 5 | +### 1. Получите API ключ |
| 6 | +- Перейдите на [Яндекс.Разработчики](https://developer.tech.yandex.ru/) |
| 7 | +- Создайте приложение и получите API ключ |
| 8 | +- Замените `YOUR_API_KEY` в `index.html` на ваш ключ |
| 9 | + |
| 10 | +### 2. Запустите сервер |
| 11 | + |
| 12 | +#### Windows (простой способ): |
| 13 | +```bash |
| 14 | +# Дважды кликните на файл |
| 15 | +start-server.bat |
| 16 | +``` |
| 17 | + |
| 18 | +#### Windows PowerShell: |
| 19 | +```powershell |
| 20 | +# Запустите PowerShell от имени администратора |
| 21 | +Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser |
| 22 | +.\start-server.ps1 |
| 23 | +``` |
| 24 | + |
| 25 | +#### Ручной запуск: |
| 26 | +```bash |
| 27 | +# Python 3 |
| 28 | +python -m http.server 8000 |
| 29 | + |
| 30 | +# Или Node.js |
| 31 | +npx http-server |
| 32 | + |
| 33 | +# Или PHP |
| 34 | +php -S localhost:8000 |
| 35 | +``` |
| 36 | + |
| 37 | +### 3. Откройте в браузере |
| 38 | +Перейдите по адресу: **http://localhost:8000** |
| 39 | + |
| 40 | +## 🎯 Что вы получите |
| 41 | + |
| 42 | +✅ **Интерактивная карта** с центром в Москве |
| 43 | +✅ **6 базовых кнопок** для управления картой |
| 44 | +✅ **4 дополнительных примера** для изучения API |
| 45 | +✅ **Красивый адаптивный интерфейс** |
| 46 | +✅ **Полная документация** и примеры кода |
| 47 | + |
| 48 | +## 🔧 Основные функции |
| 49 | + |
| 50 | +| Кнопка | Функция | |
| 51 | +|--------|---------| |
| 52 | +| 🎯 Добавить маркер | Создает случайный маркер на карте | |
| 53 | +| 🔷 Добавить полигон | Рисует цветной многоугольник | |
| 54 | +| ➖ Добавить линию | Создает линию между точками | |
| 55 | +| 🗑️ Очистить все | Удаляет все объекты с карты | |
| 56 | +| 📍 Получить центр | Показывает координаты центра карты | |
| 57 | +| 🔍 Установить зум | Устанавливает случайный уровень зума | |
| 58 | + |
| 59 | +## 🚀 Дополнительные примеры |
| 60 | + |
| 61 | +После загрузки карты появятся новые кнопки: |
| 62 | + |
| 63 | +| Кнопка | Функция | |
| 64 | +|--------|---------| |
| 65 | +| 🔍 Поиск адреса | Поиск и центрирование по адресу | |
| 66 | +| 📏 Измерить расстояние | Расчет расстояния Москва-СПб | |
| 67 | +| 🛣️ Создать маршрут | Маршрут по центру Москвы | |
| 68 | +| 🎯 Кластеризация | 50 маркеров с группировкой | |
| 69 | + |
| 70 | +## 💻 Использование в консоли |
| 71 | + |
| 72 | +Откройте Developer Tools (F12) и используйте: |
| 73 | + |
| 74 | +```javascript |
| 75 | +// Базовые функции |
| 76 | +window.mapKit.addRandomMarker() |
| 77 | +window.mapKit.addRandomPolygon() |
| 78 | +window.mapKit.clearAll() |
| 79 | + |
| 80 | +// Примеры |
| 81 | +window.searchAddressExample() |
| 82 | +window.distanceExample() |
| 83 | +window.routeExample() |
| 84 | +window.clusteringExample() |
| 85 | + |
| 86 | +// Утилиты |
| 87 | +window.calculateDistance([55.7558, 37.6176], [59.9311, 30.3609]) |
| 88 | +window.createCircle([55.7558, 37.6176], 5000) |
| 89 | +``` |
| 90 | + |
| 91 | +## 🎨 Кастомизация |
| 92 | + |
| 93 | +### Изменение центра карты: |
| 94 | +```javascript |
| 95 | +// В config.js |
| 96 | +map: { |
| 97 | + defaultCenter: [59.9311, 30.3609], // Санкт-Петербург |
| 98 | + defaultZoom: 12 |
| 99 | +} |
| 100 | +``` |
| 101 | + |
| 102 | +### Добавление новых элементов управления: |
| 103 | +```javascript |
| 104 | +// В examples.js |
| 105 | +function addCustomButton() { |
| 106 | + const button = document.createElement('button'); |
| 107 | + button.textContent = 'Моя функция'; |
| 108 | + button.onclick = () => alert('Привет!'); |
| 109 | + document.querySelector('.controls').appendChild(button); |
| 110 | +} |
| 111 | +``` |
| 112 | + |
| 113 | +## 🚨 Решение проблем |
| 114 | + |
| 115 | +### Карта не загружается: |
| 116 | +- ✅ Проверьте API ключ |
| 117 | +- ✅ Используйте локальный сервер (не открывайте файл напрямую) |
| 118 | +- ✅ Проверьте консоль браузера на ошибки |
| 119 | + |
| 120 | +### Функции не работают: |
| 121 | +- ✅ Дождитесь полной загрузки карты |
| 122 | +- ✅ Проверьте статус `window.mapKit.isInitialized` |
| 123 | + |
| 124 | +### Ошибки CORS: |
| 125 | +- ✅ Используйте локальный веб-сервер |
| 126 | +- ✅ Не открывайте `index.html` напрямую в браузере |
| 127 | + |
| 128 | +## 📚 Следующие шаги |
| 129 | + |
| 130 | +1. **Изучите код** в `mapkit.js` - основной API |
| 131 | +2. **Посмотрите примеры** в `examples.js` - практическое применение |
| 132 | +3. **Настройте конфигурацию** в `config.js` - кастомизация |
| 133 | +4. **Используйте утилиты** в `utils.js` - геопространственные вычисления |
| 134 | +5. **Создайте свой проект** на основе этого кода |
| 135 | + |
| 136 | +## 🎉 Готово! |
| 137 | + |
| 138 | +Теперь у вас есть полноценный API для работы с Яндекс Картами! |
| 139 | + |
| 140 | +**Создавайте маркеры, рисуйте полигоны, измеряйте расстояния и многое другое!** |
| 141 | + |
| 142 | +--- |
| 143 | + |
| 144 | +**Нужна помощь?** Откройте `README.md` для подробной документации. |
0 commit comments