Как правильно инициализировать Яндекс Карты API во Vue?

Question

[dicem]

Подскажите пожалуйста, пилю проект, так получилось, что карты предыдущие разрабы подключали через script в глобальной области видимости, а мне теперь это все интегрировать во Vue, делаю поле доставки в интернет магазине, подключаю к проекту след. образом:

data() {
    return {
        dropdownIsOpened: false,
        SuggestView: null,
        bounds: {
            100000003:[ // Москва
                [55.142627, 36.803259],
                [56.021281, 37.967682]
            ],
            100000006:[ // Самара
                [53.091785, 49.731327],
                [53.550907, 50.390439]
            ],
            100000008:[ // Сочи
                [43.384759, 39.149676],
                [44.029925, 40.010388]
            ]
        },
        provider: {
            suggest: function (request, options) {
                delete options['provider'];
                return ymaps.suggest(request, options).then(items => {
                    let arrayResult = [];
                    let arrayPromises = [];

                    function pushGeoData(displayName, value, jsonData) {
                        arrayResult.push({displayName: displayName, value: value, jsonData: jsonData});
                    }

                    items.forEach(i => {
                        arrayPromises.push(ymaps.geocode(i.value).then(gc => {
                            let displayName = "";
                            let value = i.value;
                            if (!i.value.match(/.*подъезд.*/)) {
                                let geoObject = gc.geoObjects.get(0);

                                if (geoObject) {
                                    let jsonData = JSON.stringify({
                                        'city': geoObject.getLocalities()[0] || geoObject.getAdministrativeAreas()[0],
                                        'street': geoObject.getThoroughfare() || geoObject.getLocalities()[0],
                                        'house': geoObject.getPremiseNumber(),
                                    });

                                    if (geoObject.getCountryCode() == "RU") {
                                        value = value.replace(geoObject.getCountry()+", ", "");
                                        value = value.replace(geoObject.getAdministrativeAreas()[0]+", ", "");
                                        displayName = "<div class='yandex-map-address_info'>"+value+"</div><div class='yandex-map-localities_info'>"+geoObject.getCountry()+", "+geoObject.getLocalities()[0]+"</div>";
                                        value = value.replace("undefined", "");
                                        displayName = displayName.replace("undefined", "");

                                        pushGeoData(displayName, value, jsonData);
                                    }
                                }
                            }
                        }));
                    })

                    return Promise.all(arrayPromises).then(function(){
                        console.log(arrayResult)
                        return ymaps.vow.resolve(arrayResult);
                    });
                })
            }
        }
    };
},
computed() {
  ...
  geoInput() {
    return document.getElementById('geo-select__input').querySelector('.app-select__input')
  },
},
methods: {
  yaMapInit() { // methods()
  this.SuggestView = new ymaps.SuggestView(this.geoInput, {
    provider: this.provider,
    boundedBy: this.bounds[this.brandCode]
  });
},
mounted() {
  ymaps.ready(this.yaMapInit());
}

Получаю ошибку TypeError: "ymaps.SuggestView is not a constructor". Совсем уже не понимаю почему, пробовал инициализацию в DOMContentLoaded заворачивать получал что то типа yaCounter..... is not defined ну и собственно ничего не вышло. Понимаю, что подключать карты вне контекста Vue не самая хорошая идея, но я уже даже и не знаю что предпринимать.

Answer 1

[Alex]

Попробуйте подключать скрипт Яндекса в момент инициализации компонента. А метод yaMapInit запускать уже после того как этот скрипт загрузится.

Дополнительно стоит предусмотреть удаление скрипта, при удалении компонента.

Пример:

created() { // или даже beforeCreated()
  const script = document.createElement('script')
  
  script.onload = () => {
    ymaps.ready(() => this.yaMapInit());
    // или
    // this.yaMapInit()
  };
  
  script.id = 'ymaps'
  script.src = "https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&lang=ru_RU"
  document.head.append(script);
},

destroyed() {
	document.head.querySelector('script#ymaps').remove()
  // ymaps = null
}

Comments

[dicem]

Спасибо, сейчас попробуем

[PavelEgorov-ru]

dicem, столкнулся сейчас с той же проблемой. У тебя получилось тогда?

[dicem]

PavelEgorov-ru, Привет, супер давно уже не занимался этим, из мне известного остался только репозиторий где я делал эти поисковые подсказки
https://github.com/DiceMasters/ymaps-filter

ymaps-filter/src/components/GeoSelect.vue

Точно не скажу че там да как но вроде работало

[PavelEgorov-ru]

dicem, Спасибо большое!!!!! сейчас я этой проблемой не занимаюсь временно. Но к ней мне придется вернуться. Спасибо что поделился репозиторием! Я его обязательно изучу! Если что, напишу в личку. Спасибо большое еще раз!