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

Важно

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

Содержимое

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

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

События

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

<template>
  <yandex-map @map-was-initialized="map = $event"></yandex-map>
  <yandex-map v-model="map">
    <yandex-map-default-scheme-layer/>
    <yandex-map-default-features-layer/>
  </yandex-map>
</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>

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

• actionend -> onActionEnd (и добавился onActionStart)
• balloonclose, balloonopen -> удалены, вы управляете этим сами
• boundschange -> onUpdate
• click -> onClick (и добавилось множество других аналогичных событий)
• contextmenu -> onContextMenu
• dblclick -> onDblClick
• destroy -> удалён. Вы сами управляете, отображается ли карта, сносить её вручную не требуется
• hintclose, hintopen -> удалены, аналогов нет, вы никак не можете узнать, отобразился ли хинт
• optionschange -> onUpdate (частично)
• sizechange -> onResize
• typechange -> удалён, аналогов нет

Документация по всем доступным в listener событиям: https://yandex.ru/dev/jsapi30/doc/ru/dg/concepts/events#list-of-events

Настройки

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

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

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

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

• settings -> теперь настройки карты надо задавать глобально при создании Карты. Передать аля другой apikey/язык/версию больше нельзя
• coords -> settings.location.center (обязательно указывать с zoom)
• map-events -> используйте yandex-map-listener
• zoom -> settings.location.zoom (обязательно указывать с center)
• bounds -> settings.location.bounds
• cluster-options -> удалён. См. документацию по новому кластеру
• cluster-callbacks -> удалён, аналогов нет, реализация лежит на вас
• behaviors -> settings.behaviors
• controls -> используйте yandex-map-controls и его детей
• detailed-controls -> аналоги есть у детей yandex-map-controls
• map-type -> для слоя Спутника вы можете использовать YandexMapDefaultSatelliteLayer
• scroll-zoom -> аналогов не нашли
• placemarks -> удалён
• use-object-manager -> удалён, но у маркеров и feature есть настройка hideOutsideViewport
• object-manager-clusterize -> удалён
• ymap-class -> вы можете задать его сами
• init-without-markers -> удалён
• show-all-markers -> удалён
• use-html-in-layout -> удалён, теперь маркеры всегда принимают только html
• options -> см. типизацию settings
• balloon-component -> удалён

Примеры

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

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

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

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

Аналоги:

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

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

Совет

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

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

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

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

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

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

Настройки

Все указанные ниже настройки надо передавать в settings вместо рута.

• marker-id -> id
• coords -> coordinates ([lon, lat, alt?])
• marker-events -> разделился на три события
  • onDoubleClick
  • onClick
  • onFastClick
• hint-content -> properties.вашключ (см. документацию YandexMapHint)

Удалены без альтернативы

marker-type (см. YandexMapFeature), balloon, icon, marker-fill, marker-stroke, circle-radius, cluster-name, options (см. YandexMapFeature), balloon-template, balloon-component-props

Слот balloon по сути переименован в default.

Примеры

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