Как заменить встроенный zoom на кастомный?

Question

[Daniil]

Использую yandex-map@beta и Vue 3.
Создал кастомный zoom и пытаюсь изменить параметр zoom в YandexMap, но не работает, и что-то мне подсказывает, что не всё так просто.

<template>
  <div class="map">
    <YandexMap
      :coordinates="coordinates"
      :detailed-controls="detailedControls"
      :controls="controls"
      :settings="settings"
      :zoom="zoom"
      :behaviors="behaviors"
      :map-type="mapType"
    ></YandexMap>
    <div class="zoomMap">
      <button @click="zoomMap(1)">+</button>
      <button @click="zoomMap(-1)">-</button>
    </div>
  </div>
</template>

<script>
import { YandexMap } from "vue-yandex-maps";
import { ref } from "vue";
export default {
  name: "Map",
  components: {
    YandexMap,
  },
  setup() {
    const coordinates = [54.706, 20.51]; 
    const controls = []; 
    const detailedControls = {
      zoomControl: {
        visible: true,
      },
    };
    const mapType = "map"; 
    const zoom = ref(19); // зум по умолчанию от 1 до 19
    const mapLoading = () => {
      console.log("Загрузилась карта");
    };
    const zoomMap = (z) => {
      if (zoom.value != 19 && z == 1) {
        zoom.value = zoom.value + z;
      } else if (zoom.value != 1 && z == -1) {
        zoom.value = zoom.value + z;
      }
    };
    const behaviors = [
      "drag", 
      "scrollZoom",
    ];
    const settings = {
      apiKey: "",
      lang: "ru_RU", // lang=en_US; lang=en_RU;
      coordorder: "latlong", 
      onload: mapLoading, 
      enterprise: false, 
      version: "2.1",
    };

    return {
      coordinates,
      controls,
      detailedControls,
      settings,
      behaviors,
      mapLoading,
      zoomMap,
      zoom,
      mapType,
    };
  },
};
</script>

<style lang="scss" scoped>
.map {
  position: relative;
  height: 80vh;
  .yandex-container {
    width: 100%;
    height: 100%;
  }
  .zoomMap {
    position: absolute;
    font-size: 30px;
    top: 50%;
    transform: translate(-50%, -50%);
    right: 0px;
    background: blue;
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    border-radius: 10px;
    color: white;
  }
}
</style>

Answer 1

[0xD34F]

Использую yandex-map@beta

Beta? Зачем пытаться использовать заведомо неготовый инструмент?

пытаюсь изменить параметр zoom в YandexMap, но не работает, и что-то мне подсказывает, что не всё так просто

Знаете - да. Не всё так просто. Открыл я исходник компонента, и не смог найти там никакого кода, который бы отвечал за изменение состояния карты при изменении значений параметров. Так что придётся менять zoom вручную, напрямую обращаясь к карте:

setup() {
  ...
  let map = null;

  return {
    ...
    onCreate: e => map = e,
    updateZoom: z => map.setZoom(Math.max(1, Math.min(19, map.getZoom() + z))),
  };
},

<yandex-map
  ...
  @created="onCreate"
/>
...
<button @click="updateZoom(+1)">+</button>
<button @click="updateZoom(-1)">-</button>

Ну или ждите, пока компонент допилят.

Comments

[Daniil]

0xD34F только beta работает с vue 3. Интересный подход с Max и Min )).