loadYmap примеры

[avxkim]

Подключил скрипт как в гайде:

import { loadYmap } from 'vue-yandex-maps'

const settings = {
  // settings hidden
}

export default {
  mounted() {
    loadYmap({ ...settings  });
  }
}

Судя по исходникам, мне должна быть доступна переменная ymaps, но она не доступна в том же mounted(), пишет, что ymaps is undefined.

[PNKBizz]

Это асинхронная функция. Я сделаю пример использования в ближайшее время.

[DiceMasters]

Подключил скрипт как в гайде:

import { loadYmap } from 'vue-yandex-maps'

const settings = {
  // settings hidden
}

export default {
  mounted() {
    loadYmap({ ...settings  });
  }
}

Судя по исходникам, мне должна быть доступна переменная ymaps, но она не доступна в том же mounted(), пишет, что ymaps is undefined.

Не разобрался с вопросом?

[PNKBizz]

Это асинхронная функция. Пока не успел поправить доки (

[avxkim]

@DiceMasters через then() или async/await:

loadYmap({ ...settings  })
  .then(() => ...);

[fancar]

Добрый день. В том же компоненте, где отрисовывается yandexMap
пытаюсь получить в mounted() ymaps для того, чтобы отрисовать на карте heatmap

loadYmap({ ...settings, debug: true }).then(() => { })

получаю ошибку
TypeError: window.__jsonp_ymaps_map is not a function

Что я делаю не так?

[PNKBizz]

Обновитесь до версии 0.10.7

[predatorfromekb]

если у вас сборка через webpack, то поможет window.ymaps

[srsad]

Добрый день. В том же компоненте, где отрисовывается yandexMap
пытаюсь получить в mounted() ymaps для того, чтобы отрисовать на карте heatmap

loadYmap({ ...settings, debug: true }).then(() => { })

получаю ошибку
TypeError: window.__jsonp_ymaps_map is not a function

Что я делаю не так?

Удалось разобраться как от рисовать heatmap?
У меня в голове немного не укладывается как это работает. На ваниле я делал бы что-то типо такого:

ymaps.ready(['Heatmap']).then(() => {
    const myMap = new ymaps.Map('map', {
      mapSettings
    });
   const heatmap = new ymaps.Heatmap(mapPoints, {config});
  ...
})

[Frallen]

Для тех кто тупит как и я. Вот пример.

loadYmap({...this.mapSettings}).then(()=> { var geolocation = window.ymaps.geolocation ); }) } )

[nestle49]

Документация и правда от бога, тот кто ее писал (привет!), как это обычно бывает, не заморачивался и опустил все необходимое (очевидное для себя), оставив какие-то обрывки из алгоритма подключения карты, по которым мы и должны собирать пазл и восстанавливать минимальную необходимую последовательность действий

@PNKBizz
После таких танцев с бубном хочется задать вопрос - реализация пакета вообще на нормальном уровне или там аналогично по принципу "ну вот как-то это работает у нас да"?

Минимальная (но не полная) последовательность шагов:

1. Сделать npm i vue-yandex-maps @types/yandex-maps (или vue-yandex-maps@next или vue-yandex-maps@beta или что-то еще?), создать файл vue-yandex-maps.d.ts с содержимым declare module 'vue-yandex-maps';
2. Добавить в tsconfig.json

"types": [
            "@types/yandex-maps"
 ]

3. В компоненте

<template>
   <div ref="mapElement" />
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { loadYmap } from 'vue-yandex-maps';

const mapElement = ref<HTMLElement | null>(null);
const map = ref<ymaps.Map | null>(null);

const yandexMapInit = async () => {
    if (!mapElement.value) {
        return;
    }

    await loadYmap({
        apiKey: '',
        lang: 'ru_RU',
        coordorder: 'latlong',
        enterprise: false,
        version: '2.1',
        debug: true
    });
    
    const ymapControls: ymaps.ControlSingleKey[] = ['zoomControl'];

    map.value = new globalThis.ymaps.Map(
        mapElement.value,
        {
            center: [55.751574, 37.573856],
            zoom: 11,
            controls: ymapControls
        },
        {
            copyrightLogoVisible: false,
            copyrightProvidersVisible: false,
            copyrightUaVisible: false,
            suppressMapOpenBlock: true
        }
    );

};

const clearMap = () => {
    if (!mapElement.value) {
        return;
    }

    for (let index = 0; mapElement.value.children.length; index++) {
        mapElement.value.children[0]?.remove();
    }

    map.value = null;
};

onMounted(async () => {
    await yandexMapInit();
});

onUnmounted(() => {
    clearMap();
});
</script>