Как изменить маркеры при зуме карты 2гис?

Question

[danilr]

Есть много маркеров (с собственной версткой), создающихся в цикле при загрузке данных (координат) в методе mounted(), как сделать так, чтобы при изменении масштаба карты меньше 5 маркеры заменялись на другой шаблон верстки?

data() {
	return {
      map: null, 
      markers: null
		};
 },
methods: {
		zoom(change) {
      this.map.setZoom(this.map.getZoom() + change); // этот метод при изменении масштаба карты
    },
mounted() {
    this.markers = DG.featureGroup()
    this.popups = DG.featureGroup()
		this.getUsersinGroup()
			.then(response => {
				this.map = DG.map("map", {
					zoom: 13,
					zoomControl: false
				});
        var coordinates = [];
        for (var i = 0; i < this.residentials.length; i++) {
              coordinates[0] = this.residentials[i].latitude
              coordinates[1] = this.residentials[i].longitude

            		let myDivIcon = DG.divIcon({  // это сам маркер, создающийся для каждого объекта
                    iconSize: [30, 30],
                    className: 'non-style',
                    html: `<div class="marker-wrapper">
                            <div class="mini-marker-wrapper">
                              <div class="mini-marker"></div>
                            </div>
                            <div class="marker-info-wrapper">
                              <div class="marker-title">${this.residentials[i].title}</div>
                              <div class="marker-decor"></div>
                            </div>
                          </div>`
		              });
              DG.marker(coordinates, { icon: myDivIcon }).addTo(this.markers)
            }
          this.markers.addTo(this.map);
        this.map.fitBounds(this.markers.getBounds());

Answer 1

[0xD34F]

Например. Уверен, можно сделать и более цивилизованно (это про отслеживание зума и про замену внутренностей маркера), но ковырять документацию как-то лень.

Comments

[danilr]

Сложно как-то, не могу под свой код подстроить - так как не до конца понимаю как это работает. У вас за пределы вью вынесены данные, а у меня они появляются в том же цикле что и отрисовка маркеров. За помощь спасибо

[0xD34F]

danilr, что мешает данные, на основе которых создаются маркеры, сделать свойством компонента? Или вы об это не подумали?

[danilr]

Они и так у меня вычисляемое свойство( из state vuex, которые при запросе к серверу получаются). Не смог совместить ваш код со своим. Видимо, я не до конца понял как у вас работает, сижу, пытаюсь разобраться. У меня в голове не состыковка, что в верстку подставляются данные из цикла, а потом ее еще нужно как-то заменить на другой маркер с теми же данными)

[0xD34F]

danilr, "не смог" - это разговор ни о чём. Не можете объяснить, с чем конкретно у вас там проблемы - ну так покажите, сделайте пример в песочнице.

[danilr]

0xD34F, Все, разобрался, работает!) Только можно еще один вопрос вам?) Так как маркеров много, то надо z-index при наведении менять,чтобы поверх был, а стилями почему то не срабатывает, когда меняю индекс попапа своего.

[0xD34F]

danilr,

У вас объекты(у меня массив один)

У меня тоже массив, как и у вас - объекты. В обоих случаях данные, на основе которых создаются маркеры, представляют собой массив объектов.

тут template это константа, а ей как функции

А это и есть функция.

можно ли как-то обойтись без специально собранного массива markerData?

Что значит "специально собранный массив" - я без понятия. У вас this.residentials то же самое, что и markerData у меня - данные, на основе которых создаются маркеры. С той лишь разницей, что координаты у вас разложены по двум разным свойствам, а у меня они сразу в виде массива.

[danilr]

Спасибо, все понял и уже эта технология работает и у меня. C Z-index тоже разобрался, important помог)