Vuejs-Vue yandex map v0.11.0: vue-yandex-maps - Vue 2.x component for Yandex Maps

icon
Latest Release: v0.11.0

Исправлена совместимость с Vue3 Добавлен функционал передачи компонента Vue в качестве балуна с сохранением реактивности (только для Vue2) Добавлен функционал передачи html в балун Добавлена возможность отключать неиспользуемые эвенты для карты и маркеров

Source code(tar.gz)
Source code(zip)

Comments

  • Plugin doesn't work when I use custom element in vue 3
    Plugin doesn't work when I use custom element in vue 3

    Nov 9, 2021

    I have 2 projects with vue yandex map in vue 3:

    1. Project where work ymaps

    In this project I connected plugin like this:

    const { createApp } = require('vue');
    import App from './App.vue';
    import ymapPlugin from 'vue-yandex-maps/dist/vue-yandex-maps.esm.js';
    
    const app = createApp(App);
    
    app.config.isCustomElement = (tag) => tag.startsWith('y'); // <= This is doesn't work
    app.use(ymapPlugin);
    app.mount('#app');
    
    1. Project where vue yandex map doesn't work and return error with message:

    Uncaught TypeError: Cannot read properties of null (reading 'offsetWidth')

    In this project plugin connected like this:

    import { defineCustomElement } from './defineCustomElementWithStyles'
    import App from './App.ce.vue'
    import store from './store'
    import router from './router'
    import ymapPlugin from 'vue-yandex-maps/dist/vue-yandex-maps.esm.js'
    
    customElements.define(
      'app-root',
      defineCustomElement(App, {
        plugins: [store, router, ymapPlugin],
      })
    )
    

    You can see more details going by project link or in stackoverflow

    Reply
  • Маркеры не реагируют на v-show/v-if
    Маркеры не реагируют на v-show/v-if

    Dec 22, 2021

    Здравствуйте, а можно пример как реализовать управление видимостью маркеров?

    У меня получается что-то такое:

    1. v-show — не работает в принципе
    2. v-if — учитывается только при загрузке компонента. После этого — как не меняй, все побоку
    3. :properties={"visible": shouldBeVisible} — тоже не работает почему-то…
    Reply
  • HTML marker layout
    HTML marker layout

    Dec 27, 2021

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

    Reply
  • Как скрыть balloon на мобильных устройствах?
    Как скрыть balloon на мобильных устройствах?

    Dec 30, 2021

    Я хотел скрыть balloon на мобильных устройствах (это когда balloon перемещается вниз автоматически) но у меня не получилось. Как можно это осуществить напримую через API Яндекс Карты или прямо через этот же плагин?

    Reply
  • Bump follow-redirects from 1.7.0 to 1.14.7
    Bump follow-redirects from 1.7.0 to 1.14.7

    Jan 13, 2022

    Bumps follow-redirects from 1.7.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump follow-redirects from 1.14.4 to 1.14.7 in /examples/Vue
    Bump follow-redirects from 1.14.4 to 1.14.7 in /examples/Vue

    Jan 15, 2022

    Bumps follow-redirects from 1.14.4 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump follow-redirects from 1.14.4 to 1.14.7 in /examples/vue3
    Bump follow-redirects from 1.14.4 to 1.14.7 in /examples/vue3

    Jan 15, 2022

    Bumps follow-redirects from 1.14.4 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump nanoid from 3.1.28 to 3.2.0 in /examples/vue3
    Bump nanoid from 3.1.28 to 3.2.0 in /examples/vue3

    Jan 22, 2022

    Bumps nanoid from 3.1.28 to 3.2.0.

    Changelog

    Sourced from nanoid's changelog.

    Change Log

    This project adheres to Semantic Versioning.

    3.2

    • Added --size and --alphabet arguments to binary (by Vitaly Baev).

    3.1.32

    • Reduced async exports size (by Artyom Arutyunyan).
    • Moved from Jest to uvu (by Vitaly Baev).

    3.1.31

    • Fixed collision vulnerability on object in size (by Artyom Arutyunyan).

    3.1.30

    • Reduced size for project with brotli compression (by Anton Khlynovskiy).

    3.1.29

    • Reduced npm package size.
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Не могу создать Полигон с нуля
    Не могу создать Полигон с нуля

    Jan 22, 2022

    <template>
      <no-ssr>
        <yandex-map
          :coords="coords"
          class="map"
          @click="onAddMarker"
          @map-was-initialized="onInitMap"
        >
          <ymap-marker
            marker-type="Polygon"
            hint-content="Hint content 1"
            :marker-id="'index'"
            :coords="polygons"
            :marker-fill="{ color: '#000000', opacity: 0.4 }"
            :marker-stroke="{ color: '#ff0000', width: 5 }"
            @click="onClick"
            @contextmenu="contextMenu"
          />
        </yandex-map>
      </no-ssr>
    </template>
    
    <script>
    // import ymaps from 'vue-yandex-maps'
    
    export default {
      name: 'YandexMapView',
      data: () => ({
        coords: [55.82934, 50.47381],
        polygons: [],
        map: null,
      }),
      methods: {
        onInitMap(map) {
          this.map = map
        },
        onAddMarker(e) {
          const coords = e.get('traget')
          // const eMap = e.get('target')
    
          this.polygons.push(coords)
    
          // eMap.editor.startDrawing()
        },
        onClick(e) {
          const eMap = e.get('target')
          eMap.editor.startEditing()
        },
        contextMenu(e) {
          const eMap = e.get('target')
          eMap.editor.stopEditing()
        },
      },
    }
    </script>
    
    <style scoped>
    .map {
      width: 100%;
      max-width: 100%;
      height: 400px;
    }
    </style>
    
    
    Reply
  • Console.log
    Console.log

    Jan 24, 2022

    Уберите это пожалуйста.

    image

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

    Jul 28, 2021

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

    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"
      }
    }
    
    
    Reply
  • Что то поломалось?
    Что то поломалось?

    Jan 13, 2018

    Раньше все работало нормально, но примерно в декабре вышло обновление и все полетело. Подумал что я где то накосячил и в итоге просто удалил Сейчас вновь понадобился данный компонент, но он так и не заработал

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

    В итоге создал чистый новый проект, установил только данный плагин. Выключил все браузерные модули(такие как adBlock и остальные)

    Скопировал пример из read.me, но в итоге все равно не заработало. Ошибок как не было в консоли, так они и не появились.

    В DOM видно что все вставилось, но ничего не показывается 2018-01-13 14 36 34 2018-01-13 14 35 39

    Вот весь код: `

    `

    Reply
  • Удаляет не все маркеры с карты
    Удаляет не все маркеры с карты

    Sep 5, 2020

    image В консоле, массив маркеров и 2 компьютед свойства

    image было 3 маркера, применился фильтр, их стало 0, но 1 почему то с карты не удалился

    или вот ситуация image было 3 маркера, применил фильтр, стало 0, а на карте всё равно осталось 3

    вот пример песочницы https://codesandbox.io/s/pensive-dawn-i8dcf?file=/src/App.vue

    в инпуте нужно поиграться с цифрами 2-3-4-5 (особенно с 5, т к ни одного маркера на карте не должно быть) и понажимать кнопку click ну и можно cancel в каких то ситуациях, не будут удалены все маркеры

    Reply
  • Смена координат маркера
    Смена координат маркера

    Jul 1, 2019

    Использую карту для отображения выбранного юзером адреса посредством стороннего селекта, который подтягивает координаты, благополучно скармливающиеся карте. Координаты у меня вычисляются в computed-свойстве. Компонент карты и компонент маркера используют одно и то же свойство для получения координат. Проблема в том, что при изменении координат карта успешно центрируется на них, а маркер остается там, где был. Хотя, в девтулзах я убедился, что координаты в него все-таки передаются. Что самое страшное - баг плавающий, т.к. в одном интерфейсе все окей, в другом беда.

    Reply
  • Работа с  API Я.Карт через инстанс карты по событию map-was-initialized
    Работа с API Я.Карт через инстанс карты по событию map-was-initialized

    Jul 30, 2020

    Не получается работать с API Я.Карт через инстанс карты по событию map-was-initialized. Ошибка [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'MultiRoute' of undefined". Что я делаю не так? Очень не хватает в документации примеров работы с API за рамками маркеров. https://codesandbox.io/s/nervous-butterfly-z8h2f?file=/src/App.vue

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

    Jun 12, 2020

    Добрый день! Столкнулся с такой проблемой, что не получается получить переменную 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? Есть ли какие-нибудь примеры кода, как это правильно сделать?

    Reply
  • Постоянное центрирование карты
    Постоянное центрирование карты

    Nov 2, 2018

    Привет, возникла проблема с картой. Вот так поставил: <yandex-map :coords="[parseFloat(build.lat), parseFloat(build.long)]" :zoom="currentZoom" style="width: 100%; height: 100%;" :controls="[]" :scroll-zoom="false" :clusterOptions="{}" @map-was-initialized="initMap" ></yandex-map>

    Далее в initMap определил коллекцию this.collection = new ymaps.GeoObjectCollection(); и добавил в неё несколько полигонов, потом добавил всю коллекцию на карту this.map.geoObjects.add(this.collection); this.map.setBounds(this.collection.getBounds(), { checkZoomRange: true });

    Ещё к каждому полигону добавил event при наведении, чтобы менял цвет полигона: polygon.events.add('mouseenter', () => { polygon.options.set({ fillOpacity: this.ActiveStyleSection.fill, strokeOpacity: this.ActiveStyleSection.stroke }); });

    И проблема была в том что при каждом изменении полигона, то есть при наведение на него карта снова центрировалась в центре всех полигонов, куда бы я карту не сместил, наведу на полигон и снова поеду к центру. Я долго искал инфу как избавиться от этого бага, может где ивент какой стоит, но решил попробовать поставить карту с нуля через ymaps.ready(...) и баг исчез, то есть вероятно где-то в расширении есть проблема.

    Reply
  • Не работает с nuxt.js
    Не работает с nuxt.js

    Oct 1, 2017

    Благодарю за замечательный плагин, но обнаружилась проблема, плагин не работает с nuxt.js.

    Reply
  • Ререндер карты
    Ререндер карты

    Sep 7, 2018

    При добавлении маркера, или при скрытии/показе, вся карта перезагружается. Я понимаю для чего это сделано, но при этом хотелось бы, чтоб можно было и без этого. Спасибо!

    Reply
  • В версии 0.8.17, удаляются все точки при обновлении и снова отрисовываются, предлагаю решение, нужна помощь с кластерами
    В версии 0.8.17, удаляются все точки при обновлении и снова отрисовываются, предлагаю решение, нужна помощь с кластерами

    Oct 13, 2019

    В версии 0.8.17 при обновлении любого количества точек удаляются все точки карты и снова отрисовываются. Это плохая практика. Например у меня на карте было 300 меток и перерисовать все, занимало до 4 секунд. Мне удалось сделать перерисовку только изменившихся точек в моем проекте. Я использовал marker_id, чтобы определить какие точки следует удалить и отрисовать новые точки. Я не решаюсь сделать pull request так как мой код подходит только для обычных точек, он не учитывает кластеры и любые другие структуры карты. Кто работал с кластерами и другими структурами yandex map, можете помочь мне?

    Reply