1

Пытаюсь сделать на vue карту яндекса. Так же есть select, в котором можно выбрать город, на который карта должна центрироваться и вывести маркеры для этого города.

Я написал метод placeMarks(marks) { }, заполняющий данные для маркеров. В первый раз, с городом по умолчанию, все замечательно: мой метод вызывается в mounted(), получает нужные точки. Отрисовывает их и центрируется где надо. При выборе города начинается грусть: с картой ничего не происходит, а в консоль вываливается ошибка:

vendor.js?id=30ec419b9ac7ad43a81f:3416 [Vue warn]: Invalid prop: custom validator check failed for prop "properties".

found in

---> at npm/src/assets/components/EcoMap.vue

Он агрится на строку, в которой я зачищаю поле данных, содержащее мои маркеры ( this.markers = []; ). Но если не зачищаю это поле, то все равно ошибка валится, но уже на другой строке, где цикл.

Сам код:

<template lang="pug">
  .delivery-sdek.eco-map
    .container
      h3 Найди свою аптеку
      .row
        .col-sm-6
          select(v-model="curCity")
            option(
              v-for="city in Doption"
              :value ="city.value"
              :name = "city.label"
              :selected ="city.value == '13330'"
              :disabled ="dsbl == 1"
            ) {{ city.label }}

    .delivery-sdek__map-canvas(:class="{'noPoints': noPoints !== null}")
      v-ymap(
        v-if="settings.coords"
        :center="settings.coords"
        :coords="settings.coords"
        :zoom="settings.zoom"
        :YMAPS_KEY="settings.apiKey"
        :behaviors=["drag", "dblClickZoom", "rightMouseButtonMagnifier", "multiTouch"]
      )
        v-ymap-placemark(
          v-if="markers.length>0"
          v-for="marker in markers"
          v-bind:key="marker.id"
          :geometry="marker.coords"
          :properties="{'balloonContentBody': marker.balloonContentBody}"
          :options="{iconLayout:'default#image', iconImageHref: '/images/icons/map-pin.svg', iconImageSize: [40, 52], iconImageOffset: [-15, -38]}"
        )
</template>
<script>
export default {
  name: 'EcoMap',
  data: function() {
    return {
      settings: {
        apiKey: "my-api",
        lang: 'ru_RU',
        coords: [37.622216, 55.753918],
        zoom: 12
      },
      markers: [],
      lat: 0,
      lng: 0,
      noPoints: null,
      curCity: null,
      Doption: null,
      obResponse: null,
      dsbl: 0
    };
  },
  props: {
    api_key : {
      type: String,
      default: null
    },
    options: null

  },
  methods: {
    placeMarks(marks) {
      let $this = this;
      this.markers = [];
      this.lat = 0;
      this.lng = 0;
          $this.noPoints = null;
          marks.forEach(obj => {
            let newString = '<div class="map-info map-info_on-map"><div class="map-info__in">';
            newString += '<div class="map-info__header">' + '<p>' + obj.Name + '</p>' + '</div>' +
                '<div class="text text_black map-info__address">' + '<p>' + obj.Address;
            newString += '</p>' + '</div>';

            if (obj.WorkTime) {
              newString += '<div class="text text_black map-info__time">' + '<p>' + obj.WorkTime + '</p>' + '</div>';
            }
            if (obj.Phone) {
              newString += '<div class="text text_black map-info__phone">' + '<a href="tel:' + obj.Phone + '">' +
                  obj.Phone + '</a>' + '</div>';
            }

            $this.lat += parseFloat(obj.cY);
            $this.lng += parseFloat(obj.cX);

            $this.markers.push({
              id: obj.id,
              coords: [obj.cY, obj.cX],
              clusterCaption: obj.Name,
              balloonContentheader: '',
              balloonContentBody: newString,
              balloonContentFooter: '',
              hintContent: '',
              PVZaddr: obj.FullAddress,
              PVZ_city: obj.City
            });
          })

          let midLat = $this.lat / $this.markers.length;
          let midLng = $this.lng / $this.markers.length;
          $this.settings.coords = [midLat.toFixed(6), midLng.toFixed(6)];

    }
  },
  mounted() {
    this.Doption = JSON.parse(this.options);
    this.curCity = this.Doption[0].value;
    let formData = new FormData;
    formData.append('city', this.curCity);
    axios.post('/ajax/get-eco-boxes/', formData).then(response => {
      this.placeMarks(response.data);
    }).catch(response => {
      console.log(response);
    });
  },
  watch: {
    curCity: function (newCity, oldCity) {
      this.dsbl = 1;
      let formData = new FormData;
      formData.append('city', newCity);
      axios.post('/ajax/get-eco-boxes/', formData).then(response => {
        this.placeMarks(response.data);
        this.dsbl = 0;
      }).catch(response => {
        console.log(response);
        this.dsbl = 0;
      });

    }
  }
};
</script>

<style scoped>

</style>

В общем самый главный вопрос как правильно переключаться меж городами на карте и обновлять маркеры? И я никак не могу понять что я делаю не так и как надо делать. Подскажите пожалуйста, буду сильно благодарен

1 ответ 1

0

решение-то очевидно: добавить параметр :key

  v-ymap(
    :key="updKey"
    v-if="settings.coords"
    :center="settings.coords"
    :zoom="settings.zoom"
    :YMAPS_KEY="settings.apiKey"
    :behaviors=["drag", "dblClickZoom", "rightMouseButtonMagnifier", "multiTouch"]
  )

это с вопроса как переинициализировать компонент ( https://michaelnthiessen.com/force-re-render/ )

мдя, вскрытие черепушки надолго меня задержало. Не делайте так

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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