How to insert your own 2gis zoom buttons?

Question

Vue.js

I can’t understand in the documentation how to apply the methods, maybe someone has worked with api 2gis or will understand.
api.2gis.ru/doc/maps/ru/manual/base-classes#dgcontrol
Here the getContainer() method is very similar to the fact that you can insert your own layout instead of the standard control.

mounted() {
    DG.then(function() {
      var map = DG.map("map", {
        center: [54.98, 82.89],
        zoom: 13,
        zoomControl: false,
        fullscreenControl: false
      });

      DG.control.zoom({ position: "topright", }).addTo(map).getContainer('test');
    });
  },

How to do it?

Answer 1

Make a zoom method:

zoom(change) {
  this.map.setZoom(this.map.getZoom() + change);
},

And connect it as a click handler to the buttons:

<div @click="zoom(+1)">zoom in</div>
<div @click="zoom(-1)">zoom out</div>

You assign absolute positioning to the buttons so that you can position them above the map. Well, stylize them somehow else, here you already know better. For example .