yandex-maps-unofficial / vue-yandex-maps Goto Github PK

Привет! Использую ObjectManager. Не работают события.

Получаю сообщение:

[Vue warn]: Extraneous non-emits event listeners (mouseenter) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.

Думал повесить тогда события на YandexMarker. Там события тоже не работают, я так понимаю только вешать на компонент ObjectManager

Песочница: https://codesandbox.io/p/sandbox/sobytiya-v-yandexobjectmanager-1h8trh?file=%2Fsrc%2FApp.vue%3A8%2C21

Кажется, что для того, чтобы все завелось, и модуль правильно обработал наличие уже загруженного ymaps нужно в файл utils.ts на строке 52 поменять

if (window.ymaps) return res(true);

на

if (window.ymaps){
      emitter.ymapReady = true;
      emitter.$emit('scriptIsLoaded');
      return res(true);
}

К сожалению, у меня не получилось нормально скомпилировать проект, поэтому отправлять pull request страшно :)

• dependencies
  • "vue": "^3.2.40",
  • "vue-yandex-maps": "^1.0.4"
• "devDependencies":
  • "@types/node": "^18.7.13",
  • "@vitejs/plugin-vue": "^3.0.3",
  • "typescript": "^4.6.4",
  • "vite": "^3.0.7",
  • "vue-tsc": "^1.0.0-rc.5"

Отображает такую ошибку при импорте YmapPlugin, в моменте глобальной регистрации компонента

поменял type на Rectangle
метка пропала
работал с properties, не помогает

Добрый день!
Можно ли как-то сделать кастомные маркеры, например вставку картинки?
Разобрался, options для этого

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

Хотел бы попросить добавить, если еще есть поддержка этой либы.

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

https://codesandbox.io/p/sandbox/tender-ride-bubwb7?file=%2Fsrc%2FApp.vue

Sandbox

При изменении иконки/размера маркера, на карте старая висит. И вероятно на изменения options в принципе не реагирует.

Что-то не пойму как менять параметры кастомных маркеров по клику.
Посмотрел по документации - вроде все верно, ошибок не выдает, просто ничего не меняется.

yaObjectManager.objects.events.add('click', (e) => { 
    e.get('target').options.set({
      iconImageSize: [50,50],
    });
    selectedPointId.value = e.get('objectId')
  })

• Основные компоненты
• Слои
• Источники данных
• Управление картой
• Модули

YMapHint

• Документировать только для YandexMapMarker и YandexMapFeature
• Документировать, что hint не реактивен

Для маркера можно использовать компонент в качестве балуна, а можно ли использовать компонент в качестве балуна для кластера? Есть ситуация когда 2 маркера находятся по одним координатам (в моем случае - это разные пункты самовывоза, которые могут быть расположены в одном помещении). И получается для маркера я могу использовать компонент, а для 2х маркеров в одной точке мне приходится рисовать еще раз этот компонент в свойствах маркера (balloonContentBody).
Вот пример: https://codesandbox.io/s/quizzical-mestorf-t80zcd?file=/src/App.vue

Hello

I'm confused about your versioning for Vue 3 😕

npm install vue-yandex-maps@next - Next version
npm install vue-yandex-maps@beta - Beta version

If I open the repo I see only one version, which is beta. I wanna work with the next version. Where can I find sources for it? 🤔

Hello I'd like to have a rounded borders for my map. I'm trying to do this:

.yandex-container {
  height: 200px;
  width: 200px;
  border-radius: 200px;
}

Border-radius doesn't work. I found no CSS examples in the Yandex Maps official sandbox.
Is there a possibility to change container settings? I tried tailwind and it also fails to apply classes to the maps component.

// tailwind class is not applied to the yandex container
<div class="rounded-3xl">
  <Map >/
</div>

Привет спасибо за отличный плагин под vue.

Сейчас работаю над выводом наборов прямых линий, к сожалению не нашел в версии v1 примеров для вывода маркеров с типом Polyline можешь помочь?

Попробовал использовать событие boundschange, не работает. Пробовал использовать событие dblclick, тоже проблема( В описании к событиям написано, что нужно использовать как и написано в YaMaps доке. Либо я что-то не так делаю. На событие click все срабатывает, вижу event, который приходит. Как затриггерить событие boundschange?

<YandexMap :settings="settings" :coordinates="coords" :zoom="12.5" :use-object-manager="true" @created="loadObjectsFromAPI()" @boundschange="getObjectsFromAPI($event)" class="yandex-container" > <YandexMarker v-for="item in data" :key="item.station_id" :marker-id="item.station_id" :coordinates="[item.latitude, item.longitude]" />

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

Ссылка на песочницу: https://codesandbox.io/p/sandbox/peredacha-instansa-v-drugoy-komponent-ll2px0

P.S Спасибо за ваш труд! Как бы я мог поддержать проект?

На проекте 2 карты, у каждой свои баллуны, однако класс yandex-balloon глобальный и задать на одной и другой карте разную высоту не получается, как можно обойти?

Что делать в случае динамического контента внутри балуна?
Было бы неплохо автоматически считать размеры

P.S. Успешно подключилось на nuxt3-rc, полет нормальный

При определенном мобильном разрешении балун перемещается в элемент ymaps-2-1-79-panel-pane, почему?

На данный момент у нас есть возможность импортировать лоадер. При этом, насколько я посмотрел проект, сам инстанс нигде не сохраняется, лишь его экземпляр используется в src/Map.ts

Как-то неудобно каждый раз создавать его передавая настройки. Их же тоже нужно импортировать.

Добрый день!
В первую очередь, большое спасибо за ваш продукт!

Итак, проблема.

Есть компонент карты:

Карта вставляется в компонент текущей страницы:

Входной параметр "items" у компонента карты получает массив объектов с сервера через переменную "mapBuildings". Выглядит это вот так:

Пытаюсь динамически отрисовывать объекты на карте, в зависимости от применяемых фильтров.
Карта работает отлично на первом рендеринге, но вскоре начинается беда. В приложении предусмотрена система фильтров.

• Когда применяются выбранные фильтры и кол-во объектов на карте уменьшается по сравнению с предыдущим запросом, то карта отрисовывает объекты отлично.
• Если после применения фильтров, объектов необходимо отрисовать столько-же, сколько и в предыдущий запрос, карта никак не изменяет положение объектов (то есть, грубо говоря, не реагирует на фильтры)
• Если же объектов больше, чем в предыдущий запрос (даже на 1), то отрисовываются вообще все объекты, которые были отрисованы в текущей сессии пользователя, на всех фильтрациях.

Отмечу, что количество объектов в devtools для Vue всегда корректное, а вот меток на карте больше:

и

Решение нашел следующее:

и

Таким образом, благодаря "v-if" и "this.mapBuildings = undefined" пока пользователь ожидает отрисовки объектов, карта исчезает, а когда ответ от сервера приходит, перерисовывается. Объекты, в таком случае, обновляются нормально, в соответствие с фильтрами. Естественно, решение не конечное, а скорее помогает приблизиться к проблеме, и очень не хочется отказываться от вашего прекрасного продукта из-за этой проблемы.

Заранее спасибо за ответ и успехов!

upd upd upd upd ...

Hello I'd like to change marker position on each click, as it was impl in v0.x from here:

// v0.x works
<template>
  <yandex-map :coords="coords">
    <ymap-marker 
      marker-id="123" 
      :coords="coords"
      :icon="markerIcon"
    />
  </yandex-map>
</template>

When I impl the same func on v1.x, I'm getting an event with coords, but the marker does not change its position:

// v1.x doesn't work
<template>
  <yandex-map
    :settings="settings"
    :coordinates="center"
    :zoom="zoom"
    @click="onMapClick"
  >
    <yandex-marker
      :marker-id="123"
      :coordinates="center"    
      @click="onMarkerClick"
    />
  </yandex-map>
</template>

Всем привет! Подскажите, как добавить метку с собственным изображением? Пытаюсь в YandexMarker засунуть параметр icon, но понимаю, что делаю что-то не так.

Туплю жутко.
Использую последнюю версию бету для vue3

<Teleport to="body">
    <div
        v-if="isPopupOpen"
        id="imagesPopup"
        class="w-full h-full flex items-center justify-center relative"
    >
      <div
          class="w-full h-[45px] bg-teal-500 flex justify-center items-center z-50 mb-[15px] absolute top-0 left-0"
      >
        <svg
            class="popup__closer absolute left-[10px] z-20 cursor-pointer"
            id="closePopupButton"
            @click="closePopup"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
          <path
              d="M16.5 21L7.5 12L16.5 3"
              stroke="white"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
          />
        </svg>
        <div class="custom-pagination justify-center items-center text-white">

          <span>Карта с координатами</span>

        </div>
      </div>
      <div class="imagesSlider__overlay" @click="closePopup"></div>
      <div class="mapContainer relative w-500 h-600">
        <div v-if="viewMap">
          <YandexMap :coordinates="[51,62]">
            <!--        <YandexMarker :coordinates="coordinates" :marker-id="333"> </YandexMarker>-->
          </YandexMap>
        </div>

      </div>
    </div>
  </Teleport>

Пытаюсь использовать так - на блоке жестко указываю стили

<style scoped>
.mapContainer {
  width: 100%;
  min-height: 600px;
  display:block;
}
.yandex-container{
  width: 100%;
  min-height: 600px;
  display:block;
}
</style>

При открытии телепорта у карты height: 0 и хоть убейся... Что я делаю не так?

При обновлении данных в Object Manager по клику на кнопку - выскакивает ошибка TypeError this._pane.getZoom is not a function
Здесь работает
this.objectManager.removeAll();
Здесь нет
this.objectManager.add(datap2);

https://codesandbox.io/s/holy-frog-er3890?file=/src/App.vue

после изменения центра карты при помощи метода инстанса карты setCenter пропадает карта, если перетащить карту вручную она появляется
пример кода и проблемы

Как мне динамически изменить размер карты? В обычной yandex map у созданного экземпляра можно вызвать метод myMap.container.fitToViewport(). А здесь как? Подскажите пожалуйста

В прошлой версии был аналогичный закрытый вопрос.
Там же есть событие, которое возвращает созданный инстанс карты.

Я разобрался как повторить в этой версии, однако хочется дополнительный пример в документации по добавлению опций из яндекс API.

P.s.
Честно говоря было совсем не очевидно, что получить инстанс можно таким путем. А другим я не нашел.

При инициализации карты, получаю ее инстанс. Передаю его в другой компонент, при клике на кнопку "Указать местоположение" хочу добавить на карту маркер через переменную ymaps, но этого не происходит. Но если я при инициализации карты, без передачи в другой компонент поставлю маркер через ymaps, все работает. Как работать с инстансом карты в других компонентах и с любыми events?

Migration needed as per this

Как типизировать ymaps в скрипте?

попытлся открыть ПР.

props: {
  options: {
    type: Object as () => ymaps.IMapOptions,
    default: null,
  },
},

const init = () => {
  map = new ymaps.Map(
        ymapId,
        {
          center: props.coordinates,
          zoom: props.zoom,
          bounds: props.bounds,
          behaviors: props.behaviors,
          controls: props.controls,
          type: `yandex#${props.mapType}` as MapType,
        },
        props.options,
     );
}

Добавление options в конструктор карты в файле Map.ts

было бы не плохо если бы добавили минимальный пример для использование
YandexClusterer

Здравствуйте, будет ли возможность использовать LoadingObjectManager и RemoteObjectManager или нет такого в задумках?

Почему возник данный вопрос.

У меня есть API с которого я тяну огромное кол-во точек на карту. Точки я прогружаю исходя из нижнего левого и правого верхнего углов экрана устройста, то есть по координатам получаю видимую область. Координаты я получаю по событию boundschange (при сдвиге карты). И вот проблема, при каждом небольшом сдвиге данные на карте обновляются, так как идет новый запрос на сервер, это не совсем правильное поведение, так как объекты на карте должны кэшироваться и в последствии потом не обновляться, так как например при открытом балуне точки, если происходит сдвиг карты балун закрывается, объекты заново кластеризуются и это не совсем правильно. LoadingObjectManager решает эту проблему и данные кэшируются. Будет ли реализован LoadingObjectManager и RemoteObjectManager?

Поддержать изменение в settings YandexMap, которые из коробки не реактивны, всех допустимых параметров

Привет! Подскажите пожалуйста, как адаптировать балун под внутренний контент?

приходится ставить фиксированную высоту

Hello I'm plaing with ymaps beta now. Thanks for building it !

I need to capture coords on some event, say a double click. As per docs, I can do that with :

myMap.events.add('click', function (e) {
    // Получение координат щелчка
    var coords = e.get('coords');
    alert(coords.join(', '));
});

And here's my component:

<StaticDotsComponent
  :pos="pos"
  @dblclick="onDblClick" />

When I print that event, I'm getting this:

onDblClick called: {"isTrusted":true,"_vts":1665844024878}

How do I capture coords? I don't see any @created or @initialized events yet

Thanks !

Я правда не уверен, связано это с реактивностью маркеров или чем-то другим, пытался форкать репо и сделать что-то свое, костыли и прочее, но ничего не помогало.

Ссылка на песочницу, где воспроизводится:
https://codesandbox.io/p/sandbox/nifty-neco-121dvo

STR:
Достаточно включить любой фильтр, отобразится 2 маркера, однако должен быть отображен один маркер, я вывожу прям на страницу информацию, сколько должно быть маркеров и сколько в массиве для вывода, сори что все в одном файле, однако да, временем не обеспечен..

В общем, проблема: Маркеры не фильтруются корректно, а именно: отображается 2 маркера, когда в массиве лишь один и больше нету, вероятно - кэшируется, баллун тоже пустой будет, т.к. по сути этого маркера нет, но он есть, и в итоге на карте их не 2, а вообще 3, хотя должен быть один. Да, над этим надо подумать, но надеюсь мысль понятна..

Не работает ymaps

• Cannot read properties of null (reading 'container')

this.getMap() возвращает Null

  const fullscreenControl = new ymaps.control.FullscreenControl();

  fullscreenControl.enterFullscreen();

При попытке добавить в ymaps.geoObjects.add(objectManager) - ошибка Cannot read properties of undefined (reading 'add')
И так везде. Ни настроить, ни добавить объекты.
Переменную в консоли вижу - сделать ничего не могу.

Возможно я что-то не понял, но не могли бы вы показать как в таком случае вызвать balloon используя кастомный iconLayout
Код:

<YandexMarker
      v-for="order in data.orders"

       :key="order.id"
       :marker-id="order.id"

       :coordinates="order.coords"

       :options="{
             iconLayout: ymaps.templateLayoutFactory.createClass(this.ordersTemplate(order))
       }"
>
<template #component>
      kiks
</template>
</YandexMarker>

Привет! nuxt3 + "vue-yandex-maps": "^1.0.4".

plugins/yandex-map.js

import plugin from 'vue-yandex-maps'
import { defineNuxtPlugin } from 'nuxt/app'


const settings = {
    apiKey: 'mykey', 
    lang: 'ru_RU', 
    coordorder: 'latlong', 
    debug: true,
    version: '2.1' 
}


export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(plugin, settings)
})

pages/map.vue

<template>
<div id="ymap">
  <yandex-map :coordinates="[32, 50]" map-type="hybrid">

  </yandex-map>
</div>
</template>

в консоли Uncaught Error: map.Container.constructor: Не удалось получить HTML-элемент контейнера.
как починить?

При обращении к компоненту, было бы неплохо, если бы можно было передовать параметр theme для переключения на темную тему чтобы не изобреть всякие фильтры для карты или накладывать слои. Что скажете? Может я просто не нашел как это уже реализовано?

<yandexMap
        :settings='{
           ...
          version: "2.1", // Версия Я.Карт
        }'
        :coordinates="coords"
        :zoom="10"
        :detailed-controls="dControls"
        :controls="controls"
    >

использую
"vue": "^3.2.0",
"vue-yandex-maps": "^1.0.4"
пример кода
https://disk.yandex.com/d/OLiNcUHoT7VHow
не обновляются метки на карте при обновлении данных приходящих из пропсов на живом сайте, но при этом если я поставлю setTimeout на пару сек и в нем отфильтрую массив меток на тестовых данных локальной сборки, то метки обновляются
https://monosnap.com/file/0b22qavex0Om3fAn3JdHTHR9Cq3j85
как видно на видео компоненты маркеров обновляются, но на карте изменений нет

При первой инициализации сайта пишет что apikey невалидный (скрин 1)

Карта находится у меня на странице корзины и когда я выбираю метку, мне надо геокодер использовать, и этот геокодер не работает, выбрасывает 403, мол с ключом чето

Но после перезагрузки страницы все нормально начинает работать. Без ошибок и без варнингов

В чем может быть проблема? Сайт недавно запущен (к тому что, не может быть, пока что, чтобы в день уходило 1000+ запросов).

Проект написан на Nuxt 3

Есть карта с отрисоваными на ней маркерами, балуны к маркерам беруться из компонента при помощи слота.
<yandex-map :key="mapKey" :coordinates="mapCenter" :zoom="11" @created="initMap">
<yandex-marker v-for="pickupPoint in this.tariffModule.filtered.pickupPoints"
:key="pickupPoint.id"
:coordinates="pickupPoint.coordinates"
:marker-id="pickupPoint.id"
:options="getIconSettings(pickupPoint)"
@click="setActivePickupPoint(pickupPoint)"
>
<template #component>




Возможно ли по кнопке вне карты открывать балун выбранного маркера?
Пробовала получить доступ к инстансу карты через @created="initMap", но не вижу в нем списка маркеров.
Также указывала ref='markers' и пыталась обратиться к маркеру так, но тоже не помогло.

написал ssr для pwa на vue
но есть проблема с картами
как можно исправить данный прикол?

вот пример кода, вставляю локально для одного компонента