Kак изменить центр существующей карты Ya Maps API?

Question

[serik]

У меня есть два метода:
1) mainMap() - создание самой карты.
2) setPoint() - изменяет ее центр при нажатии на кнопку.
Координаты я все определил, все данные есть.
ПРОБЛЕМА в том, что у меня не получается в методе setPoint() изменить созданную карту в mainMap().

let deliveryMap = {
    run() {
        deliveryMap.mainMap();
        $(document).on('click', '[data-store-id]', event => this.setPoint(event));
    },

    setPoint(event) {
        let storeId = event.currentTarget.attributes['data-store-id'].value;
        let storesPoints = [stores[storeId]['GPS_N'], stores[storeId]['GPS_S']];
        /*ymaps.ready(function () {
            let myMap = new ymaps.Map('mapStores', {
                center: storesPoints,
                zoom: 13,
                controls: []
            }, {
                searchControlProvider: 'yandex#search'
            });
            myMap.setCenter([51.781876, 55.095035], 10, {
                checkZoomRange: true
            });
        });*/
    },

    mainMap() {
        if ($('[data-stores-map]').length) {
            let tempValue = Object.values(stores);
            let storesPoints = [tempValue[0]['GPS_N'], tempValue[0]['GPS_S']];
            ymaps.ready(function () {
                let myMap = new ymaps.Map('mapStores', {
                    center: storesPoints,
                    zoom: 13,
                    controls: []
                }, {
                    searchControlProvider: 'yandex#search'
                });
                for (let j = 0; j < tempValue.length; j++) {
                    let storePoint = [tempValue[j]['GPS_N'], tempValue[j]['GPS_S']];
                    let specialText = '';
                    if (tempValue[j]['SCHEDULE'].length) {
                        specialText += '<b>Часы работы:</b><br>';
                        specialText += tempValue[j]['SCHEDULE'] + '</br>';
                    }
                    window['placemark_' + tempValue[j]['ID']] = new ymaps.Placemark(storePoint, {
                        balloonContentHeader: tempValue[j]['TITLE'],
                        balloonContentBody: specialText,
                        balloonContentFooter: '',
                        hintContent: tempValue[j]['TITLE']
                    });
                    myMap.geoObjects.add(window['placemark_' + tempValue[j]['ID']]);

                    if (tempValue.length > 1) {
                        myMap.setBounds(myMap.geoObjects.getBounds());
                        // myMap.setZoom(myMap.getZoom() - 1);
                    }
                }
            });
        }
    }
};

module.exports = deliveryMap;

Comments

[freeExec]

Скажите честно, вы документацию открывали?

[serik]

freeExec, открывал

[serik]

freeExec, иначе я бы не знал что setCenter меняет центр)

[serik]

freeExec, я уже часа два бьюсь, помогите пожалуйста как правильно сделать.
Пока лучше чем удалять и заново собирать карту я ничего не придумал.

[freeExec]

Сергей Сапогин, тогда почему я не вижу в вашем setPoint этот setCenter?

[serik]

freeExec, я его закоментил, потому что это не верное решение с ошибкой. В ответах сейчас укажу как я сделал.

[freeExec]

Сергей Сапогин, почему не верное и какая ошибка?

[serik]

freeExec, Внутри функции setPoint, во время обращении к myMap, он её не видит как переменную. Он ведь создаётся в другой функции.

[freeExec]

Сергей Сапогин, ну так сохрани, что бы была видна.

[serik]

freeExec, уважаемый, попробуй сам для начала, если ты считаешь что даёшь дельные советы, жду пруфы.
"ну так сохрани" это ж пздц какой дельный совет

[freeExec]

Сергей Сапогин, Завести переменную в deliveryMap.myMap и сохранить туда ссылку на карту разве не возможно? Почему вы маркеры успешно храните в window, а карту не можете?

Answer 1

[serik]

В итоге у меня не получилось реализовать лучше, чем сделать вот так:

let deliveryMap = {
    run() {
        deliveryMap.mainMap();
    },

    mainMap() {
        if ($('[data-stores-map]').length) {
            let tempValue = Object.values(stores);
            let storesPoints = [tempValue[0]['GPS_N'], tempValue[0]['GPS_S']];
            ymaps.ready(function () {
                let myMap = new ymaps.Map('mapStores', {
                    center: storesPoints,
                    zoom: 13,
                    controls: []
                }, {
                    searchControlProvider: 'yandex#search'
                });
                for (let j = 0; j < tempValue.length; j++) {
                    let storePoint = [tempValue[j]['GPS_N'], tempValue[j]['GPS_S']];
                    let specialText = '';
                    if (tempValue[j]['SCHEDULE'].length) {
                        specialText += '<b>Часы работы:</b><br>';
                        specialText += tempValue[j]['SCHEDULE'] + '</br>';
                    }
                    window['placemark_' + tempValue[j]['ID']] = new ymaps.Placemark(storePoint, {
                        balloonContentHeader: tempValue[j]['TITLE'],
                        balloonContentBody: specialText,
                        balloonContentFooter: '',
                        hintContent: tempValue[j]['TITLE']
                    });
                    myMap.geoObjects.add(window['placemark_' + tempValue[j]['ID']]);

                    if (tempValue.length > 1) {
                        myMap.setBounds(myMap.geoObjects.getBounds());
                    }
                }

                $(document).on('click', '[data-store-id]', function (e) {
                    e.preventDefault();
                    let storeId = e.currentTarget.attributes['data-store-id'].value;
                    let storesPoints = [stores[storeId]['GPS_N'], stores[storeId]['GPS_S']];
                    myMap.setCenter(storesPoints, 10, {
                        checkZoomRange: true
                    });
                });

            });
        }
    }
};

module.exports = deliveryMap;

Если у кого то есть идеи как более эстетичнее написать код, буду рад увидеть и выслушать советы и критику !)