Как добавить яндекс карты в angular?

Для добавления Яндекс карт в Angular, вам потребуется выполнить несколько шагов. Ниже представлено подробное описание этого процесса:

Шаг 1: Установка необходимых библиотек
Вам нужно установить несколько библиотек, чтобы интегрировать Яндекс карты в Angular. Первым делом, установите пакет angular-yandex-maps, который предоставляет компоненты и директивы для работы с Яндекс картами в Angular. Выполните следующую команду в терминале вашего проекта:

npm install angular-yandex-maps

После этого, вам также потребуется установить библиотеку @types/yandex-maps, чтобы получить подсказки при работе с API Яндекс карт. Выполните следующую команду:

npm install @types/yandex-maps

Шаг 2: Импорт модулей
Вам нужно импортировать модуль AngularYandexMapsModule в вашем основном модуле приложения (например, app.module.ts). Также импортируйте библиотеку Яндекс карт, добавив строки импорта вверху файла:

import { AngularYandexMapsModule } from 'angular-yandex-maps';
import { YANDEX_MAPS_API_KEY } from 'angular-yandex-maps';

Шаг 3: Регистрация API-ключа
Перед использованием Яндекс карт, вам необходимо зарегистрировать API-ключ на сайте разработчиков Яндекс ([https://developer.tech.yandex.ru/](https://developer.tech.yandex.ru/)). Получив API-ключ, добавьте его в файле environment.ts, чтобы иметь доступ к нему через ваше приложение Angular:

export const environment = {
  production: false,
  yandexMapsApiKey: 'YOUR_API_KEY'
};

Шаг 4: Создание компонента карты
Создайте новый компонент в Angular, который будет отображать карту. Добавьте следующий код в файл вашего компонента (например, map.component.ts):

import { Component } from '@angular/core';

@Component({
  selector: 'app-map',
  template: `
    <ymaps
        [settings]="mapSettings"
        [modules]="mapModules"
    ></ymaps>
  `
})
export class MapComponent {
  mapSettings = {
    center: [55.751574, 37.573856],
    zoom: 9
  };

  mapModules = [
    'templateLayoutFactory',
    'geocode'
  ];
}

Шаг 5: Использование компонента карты
Добавьте компонент карты в ваш представлении (HTML) файл. Например, добавьте следующий код в файл app.component.html:

<app-map></app-map>

Шаг 6: Завершение
Теперь, когда вы выполнили все вышеперечисленные шаги, вы должны увидеть карту Яндекс на странице вашего приложения Angular. Карта будет отцентрирована по координатам, указанным в настройках, и отображается с установленным уровнем масштабирования.

Это лишь базовый пример использования Яндекс карт в Angular. Вы также можете настроить различные параметры и функции для работы с картой, исследовать документацию angular-yandex-maps, чтобы узнать о доступных функциональностях.

Хорошего программирования с использованием Яндекс карт в Angular!