ddubrava / angular-yandex-maps

🗺️ Yandex.Maps Angular components that implement the Yandex.Maps JavaScript API
https://ddubrava.github.io/angular8-yandex-maps/#/
MIT License
57 stars 7 forks source link

Возможность создания собственного элемента управления картой - можно ли❓ - #203

Closed maxotto closed 1 year ago

maxotto commented 1 year ago

Description

Есть карта. Подключил к ней редактирование полигона. Хочу добавить свои собственные кнопки управления - начало рисования полигона, очистка полигона и т.п..

Для этих целей создал отдельный компонент, который унаследовал от ymaps.collection.Item

export class ZoneEditorControlComponent extends ymaps.collection.Item {
    constructor() {
        super();
        console.log('!!');
    }

    // onAddToMap(map: any) {
    //     console.log(map);
    // }
    // onRemoveFromMap(map: any) {
    //     console.log(map);
    // }
}

После этого добавляю компонент в элементы управления по аналогии с примерами Яндекса

const zoneControl = new ZoneEditorControlComponent();

        this.map.controls.add(zoneControl, {
            float: 'none',
            position: {
                top: 10,
                left: 10,
            },
        });

В итоге получаю ошибку ERROR Error: Uncaught (in promise): ReferenceError: ymaps is not defined. Не находит того, что написано в extends ymaps.collection.Item

Как все таки правильно приделать свой кастомный элемент управления с использованием именно компонента Angular? PS. Спасибо за библиотеку :)

ddubrava commented 1 year ago

Привет. Проблема в том, что конструктор в классе, который экстендится срабатывает до загрузки API. Следовательно при инициализации класса (именно инициализации, а не создании нового инстанса) API должен быть загружен.

Я попробовал через лези, но если мы сразу переходим по урлу, то модуль раньше API грузится => будет ошибка. Можно попробовать загрузить API самостоятельно и максимально рано, например, на уровне index.html.

И последнее решение, которое я вижу - не использовать класс, а сделать как в документации - https://yandex.com/dev/maps/jsbox/2.1/custom_control/

maxotto commented 1 year ago

Спасибо за быстрый ответ. У меня в принципе этот маршрут является дочерним для модуля, который грузится через loadChildren.

Получается, если я перенесу инициализацию карты в app-component, к примеру, даже не показывая ее там, то есть шанс что заработает? Буду пробовать.

ddubrava commented 1 year ago

Спасибо за быстрый ответ. У меня в принципе этот маршрут является дочерним для модуля, который грузится через loadChildren.

Получается, если я перенесу инициализацию карты в app-component, к примеру, даже не показывая ее там, то есть шанс что заработает? Буду пробовать.

API можно через YaApiLoaderService загрузить. Но проблема, что если чанк загрузится до загрузки API, например, при прямом переходе по урлу, то это не сработает. Поэтому я бы лучше для начала сделал как в документации, то есть без класса