Как устранить ошибку script error в ymaps при закрытии Vue компонента?
Я использую в своем Vue 3 проекте яндекс карты (ymaps 2.1). Карта находится на компоненте, который появляется по нажатию кнопки, и в результате некоторых событий исчезает. Как выяснилось, ошибка возникает в момент построения маршрута, когда метод map.geoObjects.add() пытается найти карту по тегу и у него это не получается, поскольку карта уже закрыта. Ошибка изображена ниже:
Script error.
at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:299:58)
at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:318:7)
не сказал бы что ошибка сильно мешает, однако хотелось бы избавиться от баннера на все лицо. Отрывок кода:
const buildRoute = async(destination) => {
let currentPos = await ymaps.geolocation.get();//Получение координат пользователя
multiRoute = new ymaps.multiRouter.MultiRoute({// Точки маршрута. Точки могут быть заданы как координатами, так и адресом.
referencePoints: [
currentPos.geoObjects.position,
(destination || props.call.addr_full_str_fact || props.call.addr_full_str)
],
params: {
routingMode: ROUTING_MODE[0],
avoidTrafficJams: AVOID_TRAFFIC,
}
}, {
boundsAutoApply: true// Автоматически устанавливать границы карты так, чтобы маршрут был виден целиком.
});
// Добавление маршрута на карту.
map.geoObjects.add(multiRoute);//Выдает ошибку скрипта если, при монтировании маршрута, карта исчезает
};
const initMap = async() => {
if (componentDead) return 0;
currentPos = currentPos || await ymaps.geolocation.get();//Получение координат пользователя
map = new ymaps.Map("map", {
center: currentPos.geoObjects.position,
zoom: MAP_ZOOM
});
map.controls.remove('rulerControl')
if (props.call)
buildRoute();
};
Ymaps.load('https://api-maps.yandex.ru/2.1?apikey=c0e7b2e5-acb1-4f1c-ae2e-39f1cf4ca6a4&lang=ru_RU').then(map => {
if (componentDead) return 0;
ymaps = map;
if (callExists.value)
initMap();
});
onBeforeUnmount(() => {
componentDead = true;
});
Я пытался использовать trycatch на методе map.geoObjects.add(), однако он не отрабатывает. Также пытался останавливать функцию, отслеживая демонтирование компонента onBeforeUnmount, однако ошибка происходит именно в методе, не позволяя напрямую остановить процесс
Ответы (1 шт):
Вы можете попробовать пакет @yandex/ymaps3-vuefy для интеграции API Карт с Vue. Обращаю внимание, что такая интеграция возможна только на третьей версии API Карт.