Пытаюсь сделать на 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>
В общем самый главный вопрос как правильно переключаться меж городами на карте и обновлять маркеры? И я никак не могу понять что я делаю не так и как надо делать. Подскажите пожалуйста, буду сильно благодарен