Как перезагрузить Яндекс карту, если изменились координаты центра?

Question

[nastya_zholudeva]

Задавала уже этот вопрос, немного продвинулась, но опять столкнулась с проблемами.

На сайте можно выбирать различные города. Когда пользователь выбирает город, то координаты центра этого города сохраняются в localStorage, а затем

methods: {
     mapShops() {
         ymaps.ready(init);
                var myMap;

                function init(){
                      var centerArray = [];
                      centerArray = [JSON.parse(localStorage.getItem('town')).lat, JSON.parse(localStorage.getItem('town')).long];

    console.log('centerArray', centerArray);

      myMap = new ymaps.Map("map", {
           center: centerArray,
            zoom: 15,
       });

     function setCenterFunc () {
       myMap.setCenter(centerArray);
   }
}
}
}

Функцию setCenterFunc вызываю в updated

updated() {
            this.$nextTick(function () {
                $(document).on('city:beforeUpdate', function () {
                    this.setCenterFunc();
                }.bind(this));

              this.setCenterFunc();

Как сделать, чтобы при смене города карта перезагружалась. Распечатываю в console.log координаты центра меняются, но карта не обновляется, в консоли ошибка this.setCenterFunc is not a function

Answer 1

[0xD34F]

А более полный вариант кода можно увидеть? Где вы определяете setCenterFunc? - судя по тому, что вы показали, она явно не в methods лежит.

Comments

[nastya_zholudeva]

@0xD34F

methods: {
     mapShops() {
         ymaps.ready(init);
                var myMap;

                function init(){
                      var centerArray = [];
                      centerArray = [JSON.parse(localStorage.getItem('town')).lat, JSON.parse(localStorage.getItem('town')).long];

    console.log('centerArray', centerArray);

      myMap = new ymaps.Map("map", {
           center: centerArray,
            zoom: 15,
       });

     function setCenterFunc () {
       myMap.setCenter(centerArray);
   }
}
}
}

[0xD34F]

nastya_zholudeva, какой ужас.

Унесите myMap в data. Сделайте метод для получения координат и метод установки центра карты, например так:

methods: {
  getCenterCoord() {
    var town = JSON.parse(localStorage.getItem('town'));
    return [ town.lat, town.lng ];
  },
  setMapCenter() {
    this.myMap.setCenter(this.getCenterCoord());
  }
...

Метод mapShops соответственно станет выглядеть как-то так:

mapShops() {
  ymaps.ready(() => {
    this.myMap = new ymaps.Map("map", {
      center: this.getCenterCoord(),
      zoom: 15,
    });
  })
}

А updated будет примерно таким:

updated() {
  this.setMapCenter();
}

Что там за бред с 'city:beforeUpdate' я без понятия, но подключать обработчик в updated - идея довольно-таки гнилая. Лучше использовать created (ну и в beforeDestroy - снимать обработчик).

Разумеется, по ходу всех этих переделок всплывёт ещё куча проблем. Сумеете ли вы с ними справится - не уверен. Вам не с vue и яндекс.картами возиться надо, а язык учить - пробелы в знаниях JS у вас ЧУДОВИЩНЫЕ.

[nastya_zholudeva]

0xD34F, а какой тип данных для myMap прописать в data? Я попробовала объект, но ошибка(

[0xD34F]

nastya_zholudeva, "ошибка" - предлагаете мне догадаться, какая именно? Что же, один раз могу попробовать - updated дёргается до создания карты, соответственно, никакого setCenter у myMap нет. Можно поступить так: изначально myMap пусть будет null, а метод setMapCenter переписать следующим образом:

setMapCenter() {
  if (this.myMap) {
    this.myMap.setCenter(this.getCenterCoord());
  }
}

[nastya_zholudeva]

0xD34F, я сделала так, как вы сказали, но получается this.myMap везде null, кроме

ymaps.ready(() => {
    this.myMap = new ymaps.Map("map", {
      center: this.getCenterCoord(),
      zoom: 15,
    });
  })

поэтому

setMapCenter() {
  if (this.myMap) {
    this.myMap.setCenter(this.getCenterCoord());
  }
}

никогда не срабатывает

[0xD34F]

nastya_zholudeva, "везде null, кроме" - это как? То есть, вы вызвали метод mapShops, карта создалась, а потом, когда вы пытаетесь её отцентрировать - вместо объекта карты в myMap лежит null? Вижу два варианта - либо вы где-то ошиблись с передачей контекста в mapShops (проверьте, чем равен this в момент создания карты), либо вы где-то перетираете значение myMap после того, как карта создана.

[nastya_zholudeva]

0xD34F,

То есть, вы вызвали метод mapShops, карта создалась, а потом, когда вы пытаетесь её отцентрировать - вместо объекта карты в myMap лежит null

вы совершенно правы. Распечатала this в

ymaps.ready(() => {
console.log('this', this);
    this.myMap = new ymaps.Map("map", {
      center: this.getCenterCoord(),
      zoom: 15,
    });
  })

получила вот такой объект

[0xD34F]

nastya_zholudeva, гм, как странно. Вижу myMap, вижу метод getCenterCoord. А вот метода setMapCenter не вижу. Отсюда вопрос - с чего вы взяли, что myMap равен null в методе setMapCenter, если его вообще нет?

[nastya_zholudeva]

0xD34F, вы правы. Я была невнимательна.
У меня осталась последняя проблема. Есть функция, которая подгружает балуны, если карту сдвинуть. queryParametrs - это параметры запроса к API,
callApi - функция, которая делает запрос к API

getBaloonsOnMap() {
                var coords = [];

                queryParametrs.left_top_lat = this.myMap.getBounds()[1][0];
                queryParametrs.left_top_long = this.myMap.getBounds()[0][1];
                queryParametrs.right_bot_lat = this.myMap.getBounds()[0][0];
                queryParametrs.right_bot_long = this.myMap.getBounds()[1][1];
                queryParametrs.town_id = JSON.parse(localStorage.getItem('town')).id;

                callApi('shop_map', queryParametrs, '').then((res) => {
                    var myShop = res.data.data;

                    for (var j = 0, max = myShop.length; j < max; j ++) {
                        coords.push([ myShop[j].lat, myShop[j].long, myShop[j].name ])
                    }

                    var obj = {
                        type: 'FeatureCollection',
                        features: coords.map(function(p){
                            return {
                                type: 'Feature',
                                properties: {
                                    balloonContent:  p[2]
                                },
                                geometry: {
                                    type: 'Point',
                                    coordinates: [p[0], p[1]]
                                }
                            }
                        })
                    };


                    var objects = ymaps.geoQuery(obj);

                    objects.searchInside(this.myMap).addToMap(this.myMap);

                    this.myMap.events.add('boundschange', function () {
                        var visibleObjects = objects.searchInside(this.myMap).addToMap(this.myMap);
                        objects.remove(visibleObjects).removeFromMap(this.myMap);
                    });
                });
            },

и в функции mapShops() я ее вызываю

ymaps.ready(() => {
console.log('this', this);
    this.myMap = new ymaps.Map("map", {
      center: this.getCenterCoord(),
      zoom: 15,
    });

this.myMap.events.add('actionbegin', this.getBaloonsOnMap());

                    this.myMap.events.add('boundschange', function (e) {
                        if (e.get('newCenter') != e.get('oldCenter')) {
                            this.getBaloonsOnMap();
                        }
                    });
  })

При загрузке карты балуны наносятся правильно, однако при сдвиге карты выскакивает ошибка

Uncaught TypeError: Cannot read property 'getBaloonsOnMap' of null

[0xD34F]

nastya_zholudeva, это в обработчике boundschange? - контекст потеряли. Используйте стрелочную функцию:
this.myMap.events.add('boundschange', (e) => {

[nastya_zholudeva]

0xD34F, спасибо вам огромное!!!! Без вас бы я не разгребла это все))