Миграция с версии 1.x

Важно

Перед прочтением данного раздела выполните шаги из общих принципов перехода.

Содержимое

• Компонент Карты
  • События
  • Настройки
  • Класс карты
  • Примеры
• Компонент Маркера
  • Главные отличия
  • Как обновляться
  • Настройки
  • Примеры
• Компонент Коллекция
• Компонент Кластер
• Компонент Object Manager

Компонент Карты

События

Событие created удалено. Используйте v-model с shallowRef вместо него:

<template>
  <yandex-map @created="map = $event"></yandex-map>// [!code --]
  <yandex-map v-model="map"> // [!code ++]
    <yandex-map-default-scheme-layer/> // [!code ++]
    <yandex-map-default-features-layer/> // [!code ++]
  </yandex-map> // [!code ++]
</template>

<script lang="ts" setup>
  import { ref } from 'vue'; 
  import { shallowRef } from 'vue'; 
  import { Map } from 'yandex-maps'; 
  import { 
    YandexMap, 
    YandexMapDefaultSchemeLayer, 
    YandexMapDefaultFeaturesLayer 
  } from 'vue-yandex-maps'; 
  import type { YMap } from '@yandex/ymaps3-types'; 

  const map = ref<Map | null>(null); 
  const map = shallowRef<YMap | null>(null); 
</script>

Событие geo-objects-updated удалено.

Других событий у компонента больше нет. Вообще. Вместо них используйте yandex-map-listener.

Документация по всем доступным в listener событиям: https://yandex.ru/maps-api/docs/js-api/object/events/YMapListener.html#events-list-dom-event-handler

Настройки

Большинство настроек теперь передаются в settings.

Новые настройки (помимо settings)

См. документацию компонента

Старые настройки

• settings -> теперь настройки карты надо задавать глобально при создании Карты. Передать аля другой apikey/язык/версию больше нельзя
• coordinates -> settings.location.center (обязательно указывать с zoom)
• events -> используйте yandex-map-listener
• zoom -> settings.location.zoom (обязательно указывать с center)
• bounds -> settings.location.bounds
• behaviors -> settings.behaviors
• controls -> используйте yandex-map-controls и его детей
• detailed-controls -> аналоги есть у детей yandex-map-controls
• map-type -> для слоя Спутника вы можете использовать YandexMapDefaultSatelliteLayer
• pan-options -> удалён

Класс карты

Класс карты был изменён с yandex-container на __ymap (а также внутренние __ymap_container, __ymap_slots).

Примеры

• Элементы управления

А также все примеры в Карте.

Компонент Маркера

В том виде, в котором вы его знали, компонента больше нет.

Аналоги:

• YandexMapDefaultMarker
• YandexMapMarker
• YandexMapFeature (полигоны/линии)

Гайд опишет миграцию на YandexMapMarker.

Совет

В случае с YandexMapFeature (полигоны/линии) смотрите, что принимает settings этого компонента и переносите туда настройки, которые поддерживаются, в нужном Яндексу формате - в частности, обратите внимание на geometry.

Главные отличия

1. Переименован в YandexMapMarker
2. Компонент принимает в себя реактивное содержимое в default-слот вместо component
3. Содержимого по умолчанию больше нет (только у YandexMapDefaultMarker)
4. При зуме компонент ведет себя немного иначе, см. настройку position в документации YandexMapMarker
5. Класс yandex-balloon был удалён

Как обновляться

<template>
    <yandex-marker coordinates="[51.789682128109, 55.140428698122]" marker-id="1"> // [!code --]
      <template #component> // [!code --]
      </template> // [!code --]
    </yandex-marker > // [!code --]
    <yandex-map-default-scheme-layer/> // [!code ++]
    <yandex-map-default-features-layer/> // [!code ++]
    <yandex-map-marker settings="{coordinates: [51.789682128109, 55.140428698122]}"> // [!code ++]
      <template #default> // [!code ++]
          <!--- HTML code here --->
      </template> // [!code ++]
    </yandex-map-marker> // [!code ++]
</template>

<script lang="ts" setup>
  import { 
    YandexMarker, 
    YandexMapDefaultSchemeLayer, 
    YandexMapDefaultFeaturesLayer, 
    YandexMapMarker, 
  } from 'vue-yandex-maps'; 
</script>

• Перепишите настройки на валидные settings
• Удалите ваши функции типа получения содержимого балуна, templateLayoutFactory и прочие
• Переместите HTML внутрь <yandex-map-marker>, уберите старые костыли, если они у вас были
  • Если ваш HTML был внутри слота component, переместите его просто в корень компонента (<template #default> или же вообще без template)
• Сверстайте ваш маркер, самостоятельно наложив стили, transition, иконки и прочее
• Проверьте, как маркер ведёт себя при зуме - если хочется "как раньше", примените position="top left-center" к компоненту

По сути, <yandex-marker> стал оберткой, внутри которой вы можете делать что душе угодно - при этом не теряя реактивность.

Настройки

• marker-id -> settings.id
• coordinates -> settings.coordinates ([lon, lat, alt?])
• events -> больше не массив, разделился на три события
  • onDoubleClick
  • onClick
  • onFastClick
• radius -> удалён
• type -> удалён, см. YandexMapFeature
• options -> см. YandexMapFeature

Примеры

См. Список примеров

Компонент Коллекция

Сохранён, но обновлён на Карты 3.0 и переименован в YandexMapCollection. Настроек больше не принимает.

Компонент возвращает YMapCollection в v-model.

Компонент Кластер

Сохранён, переименован в YandexMapClusterer и полностью переписан. Теперь кластеры, как и в случае с маркерами, надо рисовать самостоятельно, шаблона по умолчанию нет.

См. пример кластеризация и документацию по новому кластеру.

Также у маркеров (как и feature) появился параметр hideOutsideViewport как альтернатива Кластеру для оптимизации.

Компонент Object Manager

Удалён. Используйте параметр hideOutsideViewport как альтернативу.

Аналогичный параметр есть в том числе у YandexMapFeature и YandexMapDefaultMarker.