Как динамически перерисовывать яндекс.карты во Vue 3?

Question

[Comnox]

Столкнулся с такой проблемой, что в хуке created отрисовываю карту с меткой и все ок, но при клике на саму карту хочу перерисовать ее с новой меткой и с другим центром, но карта не перерисовывается.

сам компонент:

<template>
  <div id="weather-map" @click="onClick"></div>
</template>

<script>
export default {
  name: "Map",
  created() {
    let that = this;
    ymaps.ready(function () {
      that.addNewPlacemark([46.358803, 48.059937], "Астрахань");
    });
  },
  methods: {
    addNewPlacemark(point, hint) {
      let map = new ymaps.Map("weather-map", {
        center: point,
        zoom: 10,
        controls: [],
      });
      map.geoObjects.add(
        new ymaps.Placemark(point, {
          hintContent: hint,
        })
      );
    },
    onClick() {
      let that = this;
      ymaps.ready(function () {
        that.addNewPlacemark([46.865971, 46.865971], "Москва");
      });
    },
  },
};
</script>

Answer 1

[0xD34F]

Вместо повторной инициализации следует обновлять центр карты и координаты маркера:

<div ref="map"></div>

data: () => ({
  coords: [ ... ],
}),
methods: {
  initMap() {
    this.map = new ymaps.Map(this.$refs.map, {
      center: this.coords,
      zoom: 8,
    });

    this.marker = new ymaps.Placemark(this.coords, {
      hintContent: 'hello, world!!',
    });

    this.map.geoObjects.add(this.marker);

    this.map.events.add('click', this.onMapClick);

    this.$watch('coords', this.updateMap);
  },
  onMapClick(e) {
    this.coords = e.get('coords');
  },
  updateMap() {
    this.map.panTo(this.coords);
    this.marker.geometry.setCoordinates(this.coords);
  },
},
created() {
  ymaps.ready(this.initMap);
},

Comments

[Comnox]

спасибо большое!)