1

map.destroy() is not a function

console.log(map.destroy) возвращает, очевидно, undefined, т.к. метода destroy() в объекте карты вообще нет.

API-ключа нет. Может ли быть связано с этим?

Подскажите, что не так?

Откуда идет вызов:

    map = new yandexMapInitializer({
        id: 'map',
        data: SDEKStores,
    });

    map.init(function() {
        const list = $('.js-SDEKStores');

        const html = '<li class="Modal__list-item Modal__list-item--first">' +
                        '<span class="total">Всего ' + Object.keys(SDEKStores).length + ' точек самовывоза</span>' +
                     '</li>';

        list.html('');

        list.append(html);

        for (let i in SDEKStores) {
            list.append(generateSDEKStoreItem(SDEKStores[i]));
        }

        // Подставляем в заголовок выбранный пользователем город доставки
        $('.js-cityName').text($('.js-cityToDeliver').val());

        $('#Modal-SDEK').trigger('open');
    });


    map.destroy();

Отдельный модуль для карты yandexMapInitializer.js:

define([
  'jquery',
  'ymaps',
], function($) {

/**
* Инициализирует Яндекс.Карту по заданным параметрам.
*
* @param {string} id Идентификатор карты.
* @param {array} data Содержит массив объектов для инициализации карты.
*/

const yandexMapInitializer = (function(args) {

    function yandexMapInitializer(args) {

        if (!(this instanceof yandexMapInitializer)) {
          return new yandexMapInitializer(args);
        }

        this.id = args.id;
        this.data = args.data;
        this.ymaps = ymaps;
        this.isMobile = args.isMobile || false;
        this.myMap = {};
    }

    yandexMapInitializer.prototype.init = function(callback) {
        const self = this;

        this.ymaps.ready(function() {

            // подготовительные работы
            let bounds     = [[0, 0], [0, 0]];
            let length     = 0;
            /**
             * Переменные для Яндекс.Карты
             */
            let map,
                clusterer,
                coords,
                markerCity,
                pid        = 0,
                sumPointsX = 0,
                sumPointsY = 0;

            for (let i in self.data) {
                const store       = self.data[i];
                const storeCoords = [store.latitude, store.longitude];

                sumPointsX = +store.latitude + +sumPointsX;
                sumPointsY = +store.longitude + +sumPointsY;

                // формирование меток
                store.marker = new ymaps.Placemark(storeCoords, {
                    balloonContent : (store.name ? '<p class="Map__elem-text Map__elem-text--name">' + store.name + '</p>' : '') +
                    (store.address ? '<p class="Map__elem-text Map__elem-text--address">' + store.address + '</p>' : '') +
                    (store.phone ? '<p class="Map__elem-text Map__elem-text--phone">' + store.phone + '</p>' : '') +
                    (store.time ? '<p class="Map__elem-text Map__elem-text--time">' + store.time + '</p>' : '')
                }, {
                    iconLayout      : 'default#image',
                    iconImageHref   : '/app/src/img/map_marker.svg',
                    iconImageSize   : [35, 51],
                    iconImageOffset : [-18, -26],
                });

                // вычисление границ
                if (!bounds[0][0] || bounds[0][0] > storeCoords[0]) bounds[0][0] = storeCoords[0];
                if (!bounds[1][0] || bounds[1][0] < storeCoords[0]) bounds[1][0] = storeCoords[0];
                if (!bounds[0][1] || bounds[0][1] > storeCoords[1]) bounds[0][1] = storeCoords[1];
                if (!bounds[1][1] || bounds[1][1] < storeCoords[1]) bounds[1][1] = storeCoords[1];

                // подсчет кол-ва меток
                length++;
            }

            bounds[0][0] -= 10;
            bounds[0][1] -= 10;
            bounds[1][0] += 10;
            bounds[1][1] += 10;

            // определение центра точек
            const centerPointsX = +sumPointsX / length;
            const centerPointsY = +sumPointsY / length;

            map = new self.ymaps.Map(self.id, {
                center   : [centerPointsX, centerPointsY],
                zoom     : 5,
                controls : ['zoomControl']
            }, {
                minZoom           : 4,
                autoFitToViewport : 'always'
            });

            for (let i in self.data) {
                map.geoObjects.add(self.data[i].marker);
            }


            // вписываем все метки в экран
            map.setBounds(map.geoObjects.getBounds());

            // Блокируем скролл
            map.behaviors.disable('scrollZoom');

            if (callback) {
                callback();
            }

        });

    }

    return yandexMapInitializer;

})();

return yandexMapInitializer;

});

Ссылка на API, которое используем. На проекте стоит requireJS, поэтому подключаем через конфиг и т.д.

requirejs.config({
baseUrl     : '/app/src/js',
paths       : {
    'jquery'                : '../bower_components/jquery/index',

    ... много разных штук ...

    'ymaps'                 : '//api-maps.yandex.ru/2.1/?lang=ru_RU&mode=debug',
    'yandexMapInitializer'  : './components/yandexMapInitializer'
},

Для теста я уже вызываю destroy() прямо после инициализации. И вот такая ошибка вылетает.

Решение проблемы:

    yandexMapInitializer.prototype.destroy = function() {
        const self = this;

        this.ymaps.ready(function() {
            self.myMap.destroy();
        });
    }

Не забываем обернуть вызовы к API Яндекса в ymaps.ready.

4
  • а что за объект map? лучше покажите код 10 июл 2019 в 7:32
  • Добавил код откуда вызов модуля идет и сам модуль карты. 10 июл 2019 в 7:51
  • добавьте пожалуйста для полной картины ссылку на скрипт карт 10 июл 2019 в 7:53
  • Добавил в самый конец вопроса. 10 июл 2019 в 8:24

1 ответ 1

1

Я сейчас вижу что map это не объект карты, а Ваш initializer.

Внутри него, когда Вы создаете карту, Вы сохряняете ссылку на нее в переменную map, которая никуда дальше этого метода не видна.

Сделайте как-то так:

this.ymaps.ready(function() {
   ...
   self.myMap = new self.ymaps.Map(
   ...
}

и тогда вызов уничтожения можно будет вызвать на этом поле вне initializer

map.myMap.destroy();

а еще лучше сделать метод в initializer, который будет это в свою очередь делать, и дергать извне уже этот метод.

3
  • Я вас понял. Спасибо большое, сейчас опишу новый метод в модуле initializer и отпишусь о результате. 10 июл 2019 в 8:38
  • Еще раз благодарю. Вы натолкнули меня на нужное направление. Однако необходимо было в методе destroy() моего модуля Initializer также требовать предварительной загрузки api через функцию ymaps.ready, т.к. иначе функция по-прежнему была undefined (т.к. api не прогрузилось еще). 10 июл 2019 в 9:33
  • @Shadowalker ну и отлично, что разобрались =) 10 июл 2019 в 9:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.