D
D
danilr2019-04-05 12:37:08
Vue.js
danilr, 2019-04-05 12:37:08

How to change markers when zooming 2gis map?

There are many markers (with their own layout) that are created in a loop when loading data (coordinates) in the mounted () method, how to make sure that when the map scale is less than 5, the markers are replaced with another layout template?

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 the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2019-04-05
@danilr

For example . I'm sure you can do it in a more civilized way (this is about tracking the zoom and about replacing the internals of the marker), but it's somehow too lazy to pick the documentation.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question