VUE-yandex-map 'ymaps' is not defined

Я пытаюсь подключить яндекс карты в VUE3 Создал отдельный Vue компонент

<template>
  <div id="map" style="width: 1500px; height: 500px"></div>
</template>

<script>
import { loadYmap } from "vue-yandex-maps";
export default {
  async created() {
    const map_settings = {
      apiKey: "",
      lang: "ru_RU",
      coordorder: "latlong",
      version: "2.1",
    };
    await loadYmap({ map_settings, debug: true });
    ymaps.ready(() => {
      var myPlacemark,
        myMap = new ymaps.Map(
          "map",
          {
            center: [55.753994, 37.622093],
            zoom: 7,
          },
          {
            searchControlProvider: "yandex#search",
          }
        );
      // Слушаем клик на карте.
      myMap.events.add("click", function(e) {
        var coords = e.get("coords");
        document.getElementById("mark_coord").value = coords;
        // Если метка уже создана – просто передвигаем ее.
        if (myPlacemark) {
          myPlacemark.geometry.setCoordinates(coords);
        }
        // Если нет – создаем.
        else {
          myPlacemark = createPlacemark(coords);
          myMap.geoObjects.add(myPlacemark);
          // Слушаем событие окончания перетаскивания на метке.
          myPlacemark.events.add("dragend", function() {
            getAddress(myPlacemark.geometry.getCoordinates());
          });
        }
        getAddress(coords);
      });
      // Создание метки.
      function createPlacemark(coords) {
        return new ymaps.Placemark(
          coords,
          {
            iconCaption: "здесь ваша точка",
          },
          {
            preset: "islands#violetDotIconWithCaption",
            draggable: true,
          }
        );
      }
      // Определяем адрес по координатам (обратное геокодирование).
      function getAddress() {
        myPlacemark.properties.set("iconCaption", "солнечная электростанция");
        /*  ymaps.geocode(coords).then(function (res) {
            myPlacemark.properties
                .set({
                  "sfdgfhgjk":"sfdgfhg"
                });
          });*/
      }
    });
  },
};
</script>

Но получаю эту ошибку

 16:5   error  'ymaps' is not defined  no-undef
  18:21  error  'ymaps' is not defined  no-undef
  49:20  error  'ymaps' is not defined  no-undef

В чём проблема?


Ответы (0 шт):