yandex-maps-unofficial / vue-yandex-maps

Yandex Maps 3.0 components library for VueJS.
https://yandex-maps-unofficial.github.io/vue-yandex-maps/
MIT License
66 stars 9 forks source link

Не работают события в ObjectManager #56

Open Ramsly opened 1 year ago

Ramsly commented 1 year ago

Привет! Использую 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

PNKBizz commented 1 year ago

Привет! Хорошо, посмотрю как будет время

Ramsly commented 10 months ago

Привет, будет ли время исправить ошибку или не получается совсем?

PNKBizz commented 10 months ago

Привет! Ух. Не могу назвать сроков, но постараюсь до конца месяца разобраться со всеми накопившимися проблемами...

Ramsly commented 10 months ago

Будем надеяться)

Ramsly commented 9 months ago

Привет!) Стоит рассчитывать на решение проблемы или нет? Если нет, я как-нибудь попробую решить проблему самостоятельно в проекте. Просто не знаю даже чем помочь, не супер знаток в яндекс картах и в TS

crocone commented 9 months ago

Привет!) Стоит рассчитывать на решение проблемы или нет? Если нет, я как-нибудь попробую решить проблему самостоятельно в проекте. Просто не знаю даже чем помочь, не супер знаток в яндекс картах и в TS

я бы переписал на

yaObjectManager.add(objects)

на выходе получится:

...........................................................................
const points = reactive({
  type: 'FeatureCollection',
  features: [],
})

const getPoints = () => {
  points.features = _.map(points.value, (point) => {
    return {
      type: 'Feature',
      id: point.uuid,
      geometry: {
        type: 'Point',
        coordinates: [point.latitude, point.longitude],
      },
      options: {
        iconLayout: 'default#imageWithContent',
        iconImageHref: '/@src/assets/img/marker.png',
        iconImageSize: [40, 40],
        iconImageOffset: [-15, -35],
      },
    }
  })

  yaObjectManager.removeAll()
  const objects = JSON.stringify(points)
  yaObjectManager.add(objects)
  yaMap.events.add('boundschange', () => {
    updatePointList()
  })
}
const initMap = async (map) => {
  yaMap = map
  // eslint-disable-next-line no-undef
  yaObjectManager = new ymaps.ObjectManager({
    clusterize: true,
  })
  yaMap.geoObjects.add(yaObjectManager)
  getPoints()
  yaObjectManager.objects.events.add('click', (e) => {
    selectedPointId.value = e.get('objectId')
  })
}
...........................................................................
<template>
<div class="map-box">
 <YandexMap
              :settings="settings"
              :controls="['zoomControl', 'geolocationControl']"
              :coordinates="coordinates"
              @created="initMap"
            >
</div>
</template>

Там события уже нативные можно вешать (у меня все работает)

Ramsly commented 9 months ago

Привет!) Стоит рассчитывать на решение проблемы или нет? Если нет, я как-нибудь попробую решить проблему самостоятельно в проекте. Просто не знаю даже чем помочь, не супер знаток в яндекс картах и в TS

я бы переписал на

yaObjectManager.add(objects)

на выходе получится:

...........................................................................
const points = reactive({
  type: 'FeatureCollection',
  features: [],
})

const getPoints = () => {
  points.features = _.map(points.value, (point) => {
    return {
      type: 'Feature',
      id: point.uuid,
      geometry: {
        type: 'Point',
        coordinates: [point.latitude, point.longitude],
      },
      options: {
        iconLayout: 'default#imageWithContent',
        iconImageHref: '/@src/assets/img/marker.png',
        iconImageSize: [40, 40],
        iconImageOffset: [-15, -35],
      },
    }
  })

  yaObjectManager.removeAll()
  const objects = JSON.stringify(points)
  yaObjectManager.add(objects)
  yaMap.events.add('boundschange', () => {
    updatePointList()
  })
}
const initMap = async (map) => {
  yaMap = map
  // eslint-disable-next-line no-undef
  yaObjectManager = new ymaps.ObjectManager({
    clusterize: true,
  })
  yaMap.geoObjects.add(yaObjectManager)
  getPoints()
  yaObjectManager.objects.events.add('click', (e) => {
    selectedPointId.value = e.get('objectId')
  })
}
...........................................................................
<template>
<div class="map-box">
 <YandexMap
              :settings="settings"
              :controls="['zoomControl', 'geolocationControl']"
              :coordinates="coordinates"
              @created="initMap"
            >
</div>
</template>

Там события уже нативные можно вешать (у меня все работает)

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

crocone commented 9 months ago

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

Так это норм решение из либы автора) Более того - это решение более правильно так как занимает меньше времени на рендеринг. Но дело это личное))