Не отображается карта во Vue 3.0.0

eldargazizov commented 3 years ago

Прошу прощения. Может я не так что то делаю, в программировании новичок. Не пинайте сильно)) Делаю все по инструкции, но получаю ошибки.

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of render function 
  at <YandexMap coords= (2) [36.696259, 34.452574] zoom=10 > 
  at <MapsObjects onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <YandexMap coords= (2) [36.696259, 34.452574] zoom=10 > 
  at <MapsObjects onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

vue-yandex-maps.esm.js?f5ce:1 Uncaught (in promise) TypeError: e is not a function

Maps.vue

<template>
    <yandex-map :coords="coords" :zoom="10" >
        <ymap-marker :coords="coords" marker-id="123" hint-content="some hint" />
    </yandex-map>

</template>

<script>
    import {yandexMap, ymapMarker } from "vue-yandex-maps";

    const settings = {
        apiKey: "cd38a715-a2ba-4c42-9103-83b76b5dc0b0",
        lang: "ru_RU",
        coordorder: "latlong",
        version: "2.1"
    };
    export default {
        name: "MapsObjects",
        components: {yandexMap, ymapMarker},
        data() {
            return {
                settings: settings,
                coords: [
                    36.696259,
                    34.452574
            ],
            };
        }
    };
</script>

App.vue

<template>
    <div>
        <Navbar/>

        <div class="d-flex justify-content-center m-4 " v-bind:class="{'visually-hidden': $store.state.isLoading }">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>

        <div class="container pt-3">
            <router-view/>
        </div>

    </div>
</template>

<script>
    import axios from "axios";
    import Navbar from "@/components/layout/Navbar";

    export default {
        name: "App",
        components: {
            Navbar
        }
    };
</script>

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"
import axios from 'axios'

axios.defaults.baseURL = 'http://127.0.0.1:8000'

createApp(App).use(store).use(router, axios).mount('#app')

packege.json

{
  "name": "vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@popperjs/core": "^2.9.2",
    "axios": "^0.21.1",
    "bootstrap": "^5.0.0-beta3",
    "bootstrap-icons": "^1.5.0",
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-currency-input": "^2.0.0",
    "vue-router": "^4.0.0-0",
    "vue-yandex-maps": "^0.10.12",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2"
  }
}

mravathar commented 3 years ago

Такая же ошибка. Тоже новичок :)

PNKBizz commented 3 years ago

Постараюсь в ближайшее время исправить совместимость с Vue 3

eldargazizov commented 3 years ago

Такая же ошибка. Тоже новичок :)

https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js Выше него вроде не работает. на примерах https://vue-yandex-maps.github.io/examples работает, но когда я меняю на версии выше 2.6.14 не работает. Может поддержка только 2ой версии?

eldargazizov commented 3 years ago

Ждем ответа от разработчиков

eldargazizov commented 3 years ago

Ждем ответа от разработчиков

PNKBizz commented 3 years ago

Спасибо, возьму в приоритете

Brizhanev commented 3 years ago

Спасибо, возьму в приоритете

Привет, планируется ли в ближайшее время версия под VueJS 3?

PNKBizz commented 3 years ago

Планируется, но сроков назвать не могу, к сожалению.

eldargazizov commented 3 years ago

Спасибо, будем ждать

Donnevtis commented 2 years ago

Я попробовал сделать минимальные изменения для миграции на Vue 3:

импортировал утилиту h из библиотеки vue
убрал объект карты myMap и список маркеров markers из реактивных данных vue (кстати, зачем они там?)
зарегистрировал все события в поле emits
переименовал beforeDestroy на beforeUnmount
"распрямил" объекты атрибутов в узлах рендер-функции
так же, в рендер функции заменил массив с содержимым слота на вызов слота
в методе defineMarker исправил this.$slots.balloon[0].elm.outerHTML на this.$slots.balloon()[0].el.outerHTML

Вроде всё. Проверил на всех примерах из документации, все работают. Может эта информация пригодится для дальнейшей разработки

PNKBizz commented 2 years ago

Исправлено в v 0.11

PNKBizz commented 2 years ago

npm install vue-yandex-maps@next

Flashantik commented 2 years ago

npm install vue-yandex-maps@next

"vue-yandex-maps": "^0.12.3" but error still is

runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of render function 
  at <YandexMap coords= (2) [55.751244, 37.618423] > 
  at <ClientOnly> 
  at <Map> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > key="/" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <App key=1 > 
  at <NuxtRoot>

runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <YandexMap coords= (2) [55.751244, 37.618423] > 
  at <ClientOnly> 
  at <Map> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > key="/" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <App key=1 > 
  at <NuxtRoot>

vue-yandex-maps.esm.js:1 Uncaught (in promise) TypeError: this.$slots.default is not a function
    at Proxy.render (vue-yandex-maps.esm.js:1:11099)
    at renderComponentRoot (runtime-core.esm-bundler.js:896:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5651:34)
    at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
    at instance.update (runtime-core.esm-bundler.js:5694:56)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:36)
    at flushJobs (runtime-core.esm-bundler.js:396:17)

UvAlex1990 commented 1 year ago

На этом плагине возможно отобразить ПАНОРАМНУЮ версию ?

PNKBizz commented 1 year ago

@UvAlex1990 Насколько я понимаю, панорамы - это отдельная функциональность ymap

UvAlex1990 commented 1 year ago

Как бы подключить эту ПАНОРАМУ в том же компонентенте, что и плагин "vue-yandex-maps" ?

lynx-r commented 1 week ago

Нашел эту проблему по запросу ошибки an error occured while initializing yandex map with onComponentmount setting. Ошибка была из-за того, что нужно было настроить ограничения для API-ключа:

Если вы используете Java Script API версии 3.0, необходимо настроить ограничения для API-ключа, 
чтобы API работали корректно. В предыдущих версиях это не обязательно, но рекомендуется сделать, 
чтобы защитить ключ.

После его настройки и нескольких минут ожидания, запрос https://api-maps.yandex.ru/v3/?apikey=YOUR_API_KEY&lang=ru_RU начал возвращать скрипт, вместо bad request: invalid key.

Для локального быстрого фикса в настройках ключа прописал:

0.0.0.0/1
128.0.0.0/2
192.0.0.0/3
224.0.0.0/4

yandex-maps-unofficial / vue-yandex-map

Не отображается карта во Vue 3.0.0 #306