RKIS/articles/web_19.md

К содержанию

Vue.js: Работа с Яндекс картами

Для работы с яндекс картами будем использовать пакет vue-yandex-maps

Установка пакета

npm install vue-yandex-maps

Подключение

В src/main.js добавьте импорт и использование пакета:

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createYmaps } from 'vue-yandex-maps'
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.use(createYmaps({apikey: 'your-api-key'}))
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

app.mount('#app')

Для работы с яндекс-картами нужно получить api key.

1. Перейдите в кабинет разработчика Яндекс

   

   • кликните кнопку "Подключить АПИ"
   • выберите из списка "JavaScript API и HTTP Геокодер" (у меня он уже выбран, поэтому в списке его нет) и нажмите продолжить. Насколько я помню там нужны ещё какие-то действия - пройдите до конца

2. После подключения "API интерфейса" скопируйте ключ:

   

Начало работы

Для запуска вам потребуется:

• Настроить карту
• Прописать location с center/zoom в settings
• Указать компоненты <yandex-map-default-features-layer /> (нужен для маркеров и пр.) и <yandex-map-default-scheme-layer /> в теле <yandex-map />

• Опционально указать width/height у <yandex-map /> (по умолчанию: 100%)

  <script setup>
  import { ref } from 'vue'
  import { YandexMap, YandexMapDefaultSchemeLayer } from 'vue-yandex-maps'
  const map = ref(null)
  </script>
  
  <template>
  <yandex-map
    v-model="map"
    :settings="{
      location: {
        center: [37.617644, 55.755819],
        zoom: 9,
      },
    }"
    width="100%"
    height="100vh"
  >
  <yandex-map-default-scheme-layer/>
  </yandex-map>
  </template>
  

Не дописано, следите за обновлениями

Назад | Дальше