Как правильно получить переменную ymaps и провести маршрут между несколькими точками?

[Lihander]

Добрый день! Столкнулся с такой проблемой, что не получается получить переменную ymaps .

<template>
  <div class="base-map">
    <yandex-map
      ref="map"
      :settings="settings"
      class="ymap"
      :coords="coords[0] || [0, 0]"
    >
      <ymapMarker
        v-for="(point, index) in coords"
        :key="index"
        :marker-id="index"
        :coords="point"
      />
    </yandex-map>
  </div>
</template>

<script>
const settings = {
  apiKey: process.env.YANDEX_KEY,
  lang: 'ru_RU',
  coordorder: 'latlong',
  version: '2.1'
}

import { yandexMap, ymapMarker, loadYmap } from 'vue-yandex-maps'
export default {
  name: 'BaseMap',
  components: { yandexMap, ymapMarker },
  props: {
    coords: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      settings: settings
    }
  },
  async mounted() {
    await loadYmap(settings)
    console.log(window.ymaps)
  }
}
</script>

Вроде сделал все как указано в документации, но переменная ymaps остается undefined. В чем может быть проблема?

Также не нашел, как построить маршрут между несколькими точками на карте. Как я понял это надо делать, как раз через переменную ymaps? Есть ли какие-нибудь примеры кода, как это правильно сделать?

[EliotRaven]

та же проблема, "ReferenceError: ymaps is not defined" постоянно, причем у меня даже не ssr обычная spa.

[PNKBizz]

@Lihander @EliotRaven сделайте пожалуйста пример в песочнице

[EliotRaven]

@Lihander @EliotRaven сделайте пожалуйста пример в песочнице

к сожалению не могу перенести весь проект на песочницу

[EliotRaven]

в идеале бы получить инстанс карты, но на хук onLoad мы получаем его только порезаный((( меня сейчас интересует функционал расчета дистанции от меня до маркера. как это можно реализовать?

[Lihander]

@PNKBizz Так подойдет? https://codesandbox.io/s/frosty-sound-yry0w?file=/src/components/BaseMap.vue

[EliotRaven]

[image: image.png]

вт, 16 июн. 2020 г. в 17:37, Lihander notifications@github.com:

@PNKBizz https://github.com/PNKBizz Так подойдет? https://codesandbox.io/s/frosty-sound-yry0w?file=/src/components/BaseMap.vue

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PNKBizz/vue-yandex-map/issues/251#issuecomment-644806525, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGDMFDWKCLOZZDVZJJRPBF3RW57Q7ANCNFSM4N4XCI3Q .

[PNKBizz]

@Lihander проблема скорее всего в ключе апи. Попробуйте просто убрать его и проверить работу. @EliotRaven ReferenceError: ymaps is not defined - ошибка линтера, нужно прописать ymaps в глобальные переменные

[EliotRaven]

@Lihander проблема скорее всего в ключе апи. Попробуйте просто убрать его и проверить работу. @EliotRaven ReferenceError: ymaps is not defined - ошибка линтера, нужно прописать ymaps в глобальные переменные

вариант добавления ее в глобал не помог

к примеру мне нужно в кнопку без карты отрисовать растояние от меня до конкретной локации, как это сделать?

[Elena-Kho]

Проблема та же - не могу получить доступ к работе с инстансом карты, делаю по документации https://vue-yandex-maps.github.io/guide/Map.html#events, слушая событие map-was-initialized. В итоге ymaps в консоли есть, обратиться к API не получается. Можете пояснить, в чем проблема и привести примеры работы с API через инстанс карты? App.vue `

` **main.js** `import Vue from 'vue' import App from './App.vue' import YmapPlugin from 'vue-yandex-maps' import { loadYmap } from 'vue-yandex-maps'; Vue.use(YmapPlugin) new Vue({ el: '#app', render: h => h(App) })`

[EliotRaven]

Проблема та же - не могу получить доступ к работе с инстансом карты, делаю по документации https://vue-yandex-maps.github.io/guide/Map.html#events, слушая событие map-was-initialized. В итоге ymaps в консоли есть, обратиться к API не получается. Можете пояснить, в чем проблема и привести примеры работы с API через инстанс карты? App.vue `

` **main.js** `import Vue from 'vue' import App from './App.vue' import YmapPlugin from 'vue-yandex-maps' import { loadYmap } from 'vue-yandex-maps'; Vue.use(YmapPlugin) new Vue({ el: '#app', render: h => h(App) })`

[EliotRaven]

все оказалось тривиально просто

[PNKBizz]

@Elena-Kho если хотите какой-то помощи - сделайте пример в песочнице

[Elena-Kho]

все оказалось тривиально просто

Помогли. Спасибо)

[ChaosDIV]

Вроде сделал все как указано в документации, но переменная ymaps остается undefined. В чем может быть проблема?

`import { yandexMap, loadYmap } from "vue-yandex-maps";

const settings = { apiKey: "", lang: "ru_RU", coordorder: "latlong", version: "2.1", };

var ymaps = null;

далее по коду всё как в примере выше`

последняя строчка решает проблему, так как загрузка переменной асинхронна, она просто не успевает подгрузится, но ее вполне можно сделать определённой еще до загрузки, хоть и null.