Vue

@evamaps/vue — компонент для Vue 3. Карта появляется вместе с компонентом и снимается, когда компонент удаляют.

Ключ кабинета — проп apiKey: во Vue имя key занято. В Nuxt ставьте карту только на клиенте, на сервере нет DOM.

vue

<script setup>
import { EvaMap, EvaMarker } from '@evamaps/vue'
import '@evamaps/vue/style.css'
</script>

<template>
  <EvaMap :center="[37.6173, 55.7558]" :zoom="12" theme="light" api-key="pk_…" style="height: 400px">
    <EvaMarker :lnglat="[37.6173, 55.7558]" color="#e53935" label="Офис">Наш офис</EvaMarker>
  </EvaMap>
</template>

Высоту задайте сами. Стили — те же, что у SDK: @evamaps/vue/style.css или @evamaps/sdk/style.css, один раз. Атрибуция на карте не отключается.

center и zoom можно связать с данными: v-model:center и v-model:zoom. Сдвиг карты обновляет эти значения, смена значений двигает карту. Если значение уже совпадает с картой, вид заново не ставится. Тема меняется на лету. Остальное читается при создании: чтобы сменить ключ, пересоздайте компонент. Объект карты приходит в событии @ready — это тот же create(). Пропсы карты — те же опции, что у create() (maxBounds, fullscreenControl, geolocateControl, keyboard, touchZoom, doubleClickZoom и остальные), кроме имени ключа.

У метки те же опции, что у Marker в SDK. Своя картинка — icon: { url, size: [ширина, высота], anchor?, popupAnchor? }, адрес только http(s) или data:image. Без картинки рисуется оранжевая капля, color красит её. Ещё есть appearance, hint, title, keyboard, zIndexOffset, riseOnHover, draggable. Текст балуна только текстом, ссылка в link — только http(s).

vue

<EvaMarker
  :lnglat="[37.6173, 55.7558]"
  :icon="{ url: 'https://example.com/pin.png', size: [32, 40], anchor: [16, 40] }"
>
  Наш офис
</EvaMarker>

Vue ​

Vue