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/ )

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

Ваш ответ

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

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