Как установить метки в Яндекс карте во Vue.js приложении?

Question

[nurzhannogerbek]

Здравствуйте, товарищи! Помогите пожалуйста разобраться.

Пытаюсь установить метки на яндекс карте во vue.js приложении.

JS код:

export default {
        name: "YandexMap",
        data() {
            return {
                coordinates: []
            }
        },
        mounted() {
            // Установить скрипты для использования яндекс карты
            let scriptYandexMap = document.createElement('script');
            scriptYandexMap.setAttribute('src', 'https://api-maps.yandex.ru/2.1/?lang=ru_RU');
            document.head.appendChild(scriptYandexMap);

            // Инициализировать яндекс карту
            scriptYandexMap.addEventListener("load", this.initializeYandexMap);

            // Выполнить "GET" запрос
            axios.get('URL').then(response => {
                let self = this;
                let coordinates = [];
                for (let i = 0; i < response.data.length; i++) {
                    coordinates.push([response.data[i]["LATITUDE"], response.data[i]["LONGITUDE"]]);
                }
                self.coordinates = coordinates;

                // Установить метки на яндекс карту
                self.setMarkers();
            });
        },
        methods: {
            initializeYandexMap() {
                ymaps.ready(function(){
                    self.map = new ymaps.Map("yandex-map", {
                        center: [48.352571497155054, 64.04235076905002],
                        zoom: 5,
                        controls: [zoomControl, searchControl, 'fullscreenControl'],
                        searchControlProvider: 'yandex#search'
                    });
                });
            },
            setMarkers() {
                for (let i = 0; i < this.coordinates.length; i++) {
                    let placemark = new ymaps.Placemark(this.coordinates[i]);
                    this.map.geoObjects.add(placemark);
                }
            }
        }
    }

В консоли вижу следующую ошибку:

Uncaught (in promise) TypeError: ymaps.Placemark is not a constructor
at VueComponent.setMarkers

Подскажите пожалуйста, как исправить ошибку.

Answer 1

[0xD34F]

Нет гарантии, что карта загрузится быстрее, чем вы получите данные для меток (этого и не происходит, почему и возникает ошибка), поэтому выполнять запрос данных следует после того, как карта будет готова к использованию - т.е., в ymaps.ready.

UPD. Вынесено из комментариев:

Я так понял, вы предлагаете код, который находится в функции setMarkers() перенести в initializeYandexMap(), я прав?

Нет, не правы. Подумайте ещё. Предположим, вы так сделали. Что будет, если карта загрузится раньше, чем данные? Вы ничего не увидите, потому что массив coordinates будет пустым в момент выполнения setMarkers.

Ещё раз: выполняйте действия последовательно, а не параллельно - сначала загрузка карты, затем загрузка данных. Это самый простой вариант. Параллельная загрузка организовывается немного посложнее - надо обернуть ymaps.ready в промис, и воспользоваться Promise.all.

Как это может выглядеть - первый вариант, второй (запрос заменён на setTimeout, но думаю суть понятна).

Comments

[nurzhannogerbek]

Я так понял, вы предлагаете код, который находится в функции setMarkers() перенести в initializeYandexMap(), я прав? Если честно хотелось бы каждую операцию помещать в отдельную функцию. Так легче будет сопровождать проект в будущем на мой личный взгляд. Так же будет возможность повторно использовать какую либо функцию повторно.

[freeExec]

NogerbekNurzhan, Нет, он говорит про // Установить метки на яндекс карту, метод вы вызываете слишком рано.

[0xD34F]

NogerbekNurzhan, дополнил ответ.