Vue Yandex Maps

Appearance

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

Важно

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

Содержимое

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

События ​

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

vue
<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 -> удалён

Примеры ​

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

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

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

Аналоги:

Гайд опишет миграцию на 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.

Примеры ​

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

Сделано с ♥ под лицензией MIT.