@evamaps/vue

@evamaps/vue

Карта EvaMaps для Vue 3 (3.5 и новее): компонент EvaMap и метки EvaMarker. Тайлы OpenStreetMap, лёгкий 2D-движок без Leaflet и MapLibre, типы TypeScript внутри.

Установка

npm i @evamaps/vue

Нужен vue 3.5 и новее. Пакет сам тянет @evamaps/sdk, ставить его отдельно не нужно.

Пример

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

<template>
  <EvaMap :center="[37.6173, 55.7558]" :zoom="12" style="height: 400px" />
</template>

Высоту задайте сами. Стили подключаются один раз, те же, что у SDK. Координаты везде [lng, lat].

Ключ кабинета — проп api-key (в SDK это key, во Vue это имя занято). В Nuxt ставьте карту только на клиенте.

v-model:center и v-model:zoom связывают вид карты с данными, @ready отдаёт объект карты. Опции карты те же, что у create() в SDK: theme (light, dark, gray), maxBounds, fullscreenControl, geolocateControl и остальные.

Ключ и тайлы

Тайлы отдаются только через EvaMaps SDK, <eva-map> и iframe. Без ключа — 5 000 загрузок карты в месяц на сайт, ключ и тарифы — в кабинете https://app.evamaps.ru.

Ссылки

Документация: https://evamaps.ru/docs/vue SDK без фреймворка: @evamaps/sdk

Подпись © OpenStreetMap · © EvaMaps на карте видна всегда и не отключается.