Skip to content

Home

Jump to bottom
Dmitry Olegovich Sorokin (@sorydima) edited this page Aug 25, 2025 · 1 revision

Here's a polished, wiki-style documentation entry for the MapsYandexAPI repository by REChain-Network-Solutions:

MapsYandexAPI (Репозиторий)

Описание
MapsYandexAPI — демонстрационный проект, иллюстрирующий основные возможности API Яндекс Карт (MapKit) для внедрения интерактивных карт на веб-страницах (GitHub).

Основные возможности

  • Инициализация карты с заданными настройками (центр, зум, контролы)

  • Добавление маркеров (Placemark)

  • Создание полигонов (Polygon)

  • Рисование линий (Polyline)

  • Управление зумом и центром карты

  • Обработка событий карты (например, клики)

  • Геокодирование адресов

  • Расчёт расстояний между точками

  • Добавление маркеров по клику
    (GitHub)

Дополнительные функции

  • Автоматическое использование случайных цветов для объектов

  • Адаптивный дизайн для разных устройств

  • Автоматическое обновление информации (напр. при добавлении объектов)

  • Счетчик объектов на карте

  • Информационная панель (dashboard)
    (GitHub)

Установка и запуск

Требования:

  • Веб-браузер с поддержкой ES6+ JavaScript

  • API-ключ Яндекс Карт

  • Локальный веб-сервер (желательно, чтобы избежать CORS-проблем)
    (GitHub)

Инструкции:

  1. Получите API-ключ Яндекс Карт, зарегистрировав приложение на платформе разработчика Яндекса (GitHub)

  2. В файле index.html вставьте ваш API ключ:

    <script src="https://api-maps.yandex.ru/2.1/?apikey=ВАШ_API_КЛЮЧ&lang=ru_RU"></script>

    (GitHub)

  3. Для локального запуска:

    • Python: python -m http.server 8000

    • Node.js: npx http-server

    • PHP: php -S localhost:8000
      Или просто открыть index.html (работает не на всех функциях) (GitHub)

  4. Перейдите в браузере на http://localhost:8000 (GitHub)

Использование функциональности

  • Добавление маркера: нажмите кнопку «Add Marker» или вызовите window.mapKit.addRandomMarker() (GitHub)

  • Добавление полигона/линии аналогичными методами (addRandomPolygon, addRandomPolyline) (GitHub)

  • Очистка всех объектов: window.mapKit.clearAll() (GitHub)

  • Поиск по адресу:

    const coords = await window.mapKit.searchByAddress('Москва, Красная площадь');
``` :contentReference[oaicite:11]{index=11}

  • Расчёт расстояния:

    const point1 = [55.7558, 37.6176]; // Москва
const point2 = [59.9311, 30.3609]; // Санкт-Петербург
const distance = window.mapKit.calculateDistance(point1, point2);
console.log(`Расстояние: ${distance} метров`);
``` :contentReference[oaicite:12]{index=12}

  • Получение текущего центра карты: window.mapKit.getCenter() (GitHub)

  • Установка зума:

    window.mapKit.map.setZoom(15);
``` :contentReference[oaicite:14]{index=14}

Архитектура

Реализован главный класс YandexMapKit с такими полями:

  • map: экземпляр карты

  • objects, markers, polygons, polylines: массивы объектов на карте

  • isInitialized: статус инициализации карты
    (GitHub)

Структура проекта:

index.html      — HTML-страница
styles.css      — стили
mapkit.js       — основной JS-код (API обёртка)
README.md       — документация

(GitHub)

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

Маркеры (ymaps.Placemark):

const marker = new ymaps.Placemark(coords, {
  balloonContent: 'Текст в балуне'
}, {
  preset: 'islands#blueDotIcon',
  iconColor: '#ff0000'
});

(GitHub)

Полигоны:

const polygon = new ymaps.Polygon([points], {
  balloonContent: 'Описание полигона'
}, {
  fillColor: '#ff0000',
  strokeColor: '#000000',
  strokeWidth: 2,
  fillOpacity: 0.6
});

(GitHub)

Линии:

const polyline = new ymaps.Polyline([points], {
  balloonContent: 'Описание линии'
}, {
  strokeColor: '#ff0000',
  strokeWidth: 3
});

(GitHub)

Настройки карты:

this.map = new ymaps.Map('map', {
  center: [55.7558, 37.6176],
  zoom: 10,
  controls: ['zoomControl', 'fullscreenControl', 'geolocationControl']
});

(GitHub)

Отладка и рекомендации

  • Проверьте консоль браузера (Dev Tools) — должны выводиться логи вроде “Инициализация Яндекс Карт…” и “Добавлен маркер…” (GitHub)

  • Убедитесь, что карта загружена: console.log(typeof ymaps) должно вывести "function" (GitHub)

  • Проблемы с отображением:

    • Проверьте API-ключ

    • Используйте локальный сервер вместо прямого открытия файла

    • Следите за значением isInitialized
      (GitHub)

Вклад в проект

  1. Форкните репозиторий

  2. Создайте feature-ветку (git checkout -b feature/...)

  3. Сделайте коммит с изменениями

  4. Отправьте ветку и откройте Pull Request
    (GitHub)

При любых ошибках или предложениях: используйте систему Issues на GitHub (GitHub)

Краткий обзор

Элемент Детали
Назначение Демонстрационная обёртка для API Яндекс Карт
Основной язык Kotlin (94.6 %), JavaScript, HTML, CSS
Лицензия BSD-3-Clause License
Статистика ★ 1, 0 forks, 0 issues
Последняя активность Последнее обновление: декабрь 2024 года (GitHub)

Хочешь, могу помочь написать более развернутое техническое руководство по каждому модулю, добавить примеры или перевести документ на другой язык — скажи, что нужно!

Here's a polished, wiki-style documentation entry for the **MapsYandexAPI** repository by **REChain-Network-Solutions**:

MapsYandexAPI (Репозиторий)

Описание MapsYandexAPI — демонстрационный проект, иллюстрирующий основные возможности API Яндекс Карт (MapKit) для внедрения интерактивных карт на веб-страницах ([GitHub]1).

Основные возможности

  • Инициализация карты с заданными настройками (центр, зум, контролы)
  • Добавление маркеров (Placemark)
  • Создание полигонов (Polygon)
  • Рисование линий (Polyline)
  • Управление зумом и центром карты
  • Обработка событий карты (например, клики)
  • Геокодирование адресов
  • Расчёт расстояний между точками
  • Добавление маркеров по клику ([GitHub]1)

Дополнительные функции

  • Автоматическое использование случайных цветов для объектов
  • Адаптивный дизайн для разных устройств
  • Автоматическое обновление информации (напр. при добавлении объектов)
  • Счетчик объектов на карте
  • Информационная панель (dashboard) ([GitHub]1)

Установка и запуск

Требования:

  • Веб-браузер с поддержкой ES6+ JavaScript
  • API-ключ Яндекс Карт
  • Локальный веб-сервер (желательно, чтобы избежать CORS-проблем) ([GitHub]1)

Инструкции:

  1. Получите API-ключ Яндекс Карт, зарегистрировав приложение на платформе разработчика Яндекса ([GitHub]1)

  2. В файле index.html вставьте ваш API ключ:

    <script src="https://api-maps.yandex.ru/2.1/?apikey=ВАШ_API_КЛЮЧ&lang=ru_RU"></script>

    ([GitHub]1)

  3. Для локального запуска:

    • Python: python -m http.server 8000
    • Node.js: npx http-server
    • PHP: php -S localhost:8000 Или просто открыть index.html (работает не на всех функциях) ([GitHub]1)

  4. Перейдите в браузере на http://localhost:8000 ([GitHub]1)

Использование функциональности

  • Добавление маркера: нажмите кнопку «Add Marker» или вызовите window.mapKit.addRandomMarker() ([GitHub]1)

  • Добавление полигона/линии аналогичными методами (addRandomPolygon, addRandomPolyline) ([GitHub]1)

  • Очистка всех объектов: window.mapKit.clearAll() ([GitHub]1)

  • Поиск по адресу:

    const coords = await window.mapKit.searchByAddress('Москва, Красная площадь');
``` :contentReference[oaicite:11]{index=11}

  • Расчёт расстояния:

    const point1 = [55.7558, 37.6176]; // Москва
const point2 = [59.9311, 30.3609]; // Санкт-Петербург
const distance = window.mapKit.calculateDistance(point1, point2);
console.log(`Расстояние: ${distance} метров`);
``` :contentReference[oaicite:12]{index=12}

  • Получение текущего центра карты: window.mapKit.getCenter() ([GitHub]1)

  • Установка зума:

    window.mapKit.map.setZoom(15);
``` :contentReference[oaicite:14]{index=14}

Архитектура

Реализован главный класс YandexMapKit с такими полями:

  • map: экземпляр карты
  • objects, markers, polygons, polylines: массивы объектов на карте
  • isInitialized: статус инициализации карты ([GitHub]1)

Структура проекта:

index.html      — HTML-страница
styles.css      — стили
mapkit.js       — основной JS-код (API обёртка)
README.md       — документация

([GitHub]1)

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

Маркеры (ymaps.Placemark):

const marker = new ymaps.Placemark(coords, {
  balloonContent: 'Текст в балуне'
}, {
  preset: 'islands#blueDotIcon',
  iconColor: '#ff0000'
});

([GitHub]1)

Полигоны:

const polygon = new ymaps.Polygon([points], {
  balloonContent: 'Описание полигона'
}, {
  fillColor: '#ff0000',
  strokeColor: '#000000',
  strokeWidth: 2,
  fillOpacity: 0.6
});

([GitHub]1)

Линии:

const polyline = new ymaps.Polyline([points], {
  balloonContent: 'Описание линии'
}, {
  strokeColor: '#ff0000',
  strokeWidth: 3
});

([GitHub]1)

Настройки карты:

this.map = new ymaps.Map('map', {
  center: [55.7558, 37.6176],
  zoom: 10,
  controls: ['zoomControl', 'fullscreenControl', 'geolocationControl']
});

([GitHub]1)

Отладка и рекомендации

  • Проверьте консоль браузера (Dev Tools) — должны выводиться логи вроде “Инициализация Яндекс Карт…” и “Добавлен маркер…” ([GitHub]1)

  • Убедитесь, что карта загружена: console.log(typeof ymaps) должно вывести "function" ([GitHub]1)

  • Проблемы с отображением:

    • Проверьте API-ключ
    • Используйте локальный сервер вместо прямого открытия файла
    • Следите за значением isInitialized ([GitHub]1)

Вклад в проект

  1. Форкните репозиторий
  2. Создайте feature-ветку (git checkout -b feature/...)
  3. Сделайте коммит с изменениями
  4. Отправьте ветку и откройте Pull Request ([GitHub]1)

При любых ошибках или предложениях: используйте систему Issues на GitHub (GitHub)

Краткий обзор

Элемент Детали
Назначение Демонстрационная обёртка для API Яндекс Карт
Основной язык Kotlin (94.6 %), JavaScript, HTML, CSS
Лицензия BSD-3-Clause License
Статистика ★ 1, 0 forks, 0 issues
Последняя активность Последнее обновление: декабрь 2024 года ([GitHub]1)
Clone this wiki locally