yandex-maps-unofficial / vue-yandex-map

Yandex Maps Component for VueJS
MIT License
359 stars 103 forks source link

Постоянное центрирование карты #93

Closed webivan1 closed 5 years ago

webivan1 commented 5 years ago

Привет, возникла проблема с картой. Вот так поставил: ` <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"

`

Далее в 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(...) и баг исчез, то есть вероятно где-то в расширении есть проблема.

PNKBizz commented 5 years ago

Привет! Спасибо большое, посмотрю с чем это может быть связано

AlexKu777 commented 5 years ago

Такая же проблема с определением координат по клику. Вывожу маркер ранее отмеченых координат, по клику нахожу координаты, которые назначются маркеру. Но вместо того, чтобы передвинуть маркер, карта резко центрируется по новым координатам. И значение масштабирования тоже сбрасывается.

xsen commented 5 years ago

Это из за этого кода

    watch: {
        coordinates(newVal) {
            this.myMap.panTo && this.myMap.panTo(newVal)
        },
....
    },
    computed: {
        coordinates() {
            return this.coords.map(item => +item)
        },
    },

я так понял при изменении dom в родительском компоненте, заново вычисляется свойства все и происходит центрирование

azam10x commented 5 years ago

проблема ещё не решена ?

PNKBizz commented 5 years ago

@MamatmurodovA можете воспроизвести кейс в песочнице?

SergeyNekrasoff commented 5 years ago

Как в итоге центрировать карту по кластеру или маркеру, на который кликнули? У меня всегда центрируется по значению из coords компонента yandex-maps, в который я передаю координаты первого элемента массива placemarks.

<yandex-map :coords="coords" :controls="[]" :zoom="zoom" ref="map" :class="{ 'map--expanded': expands }" @map-was-initialized="initHandler" :init-without-markers="false" :placemarks="placemarks" :options="{ suppressMapOpenBlock: true, autoFitToViewport: 'always' }" :cluster-callbacks="{ '1': { click: getDataOfCluster }}" :cluster-options="{ 1: { clusterDisableClickZoom: false, hasBalloon: false }}"> <button class="btn-expand-map" @click="() => this.expands = !this.expands"> Развернуть карту </button> <ymap-marker v-for="(location, index) in placemarks" :key="index" :marker-id="index" marker-type="placemark" :coords="location" :callbacks="{ click: getDataOfCoords }" cluster-name="1" :icon="{ layout: 'default#image', imageHref: require('assets/svg/marker.svg'), imageSize: [27, 36], imageOffset: [-5, -15], }"></ymap-marker> </yandex-map>

PNKBizz commented 5 years ago

@SergeyNekrasoff во-первых зачем вы задаете маркеры через placemarks, если их же дублируете через <ymap-marker>? Во-вторых - сделайте песочницу с вашим кейсом, там все и будет понятно

SergeyNekrasoff commented 5 years ago

@PNKBizz, убрал placemarks. Попытался воспроизвести в codesandbox, но точки так и не показались, поэтому посмотрите пожалуйста сам компонент YandexMaps https://codesandbox.io/s/codesandbox-nuxt-j5vjy

PNKBizz commented 5 years ago

@SergeyNekrasoff у вас там очень много всего накручено. Убрал лишнее - все центруется. https://codesandbox.io/s/codesandbox-nuxt-ol0l2

SergeyNekrasoff commented 5 years ago

@PNKBizz, да центрируется отлично, но у меня там было два коллбека, один на маркер, другой на кластер.

Проблема в том, что нужно получать данные кликнув и на кластер и на метку. Сецчас работает только по метке, т.е кликнув по кластеру я не получаю данные. Когда добавляют :cluster-callback с тем же методом как у метки - getDataOfCoords, то данные приходят, но центр уплывает на на координаты :coords.

Upd: как можно вообще отключить центрирование?

PNKBizz commented 5 years ago

@SergeyNekrasoff попробуйте удалить все лишнее и разобраться с колбэком на кластере, а потом и на маркере

SergeyNekrasoff commented 5 years ago

@PNKBizz, я же написал что на маркере все ок, а cluster-callback центрирует автоматом по координатам из coords, куда бы я не кликнул. Как отключить центрирование вообще?

Вот здесь более понятнее, попробуйте кликнуть на кластер или метку и увидите куда центрируется карта: https://codesandbox.io/s/codesandbox-nuxt-1ht4k (к точке из coords)

PNKBizz commented 5 years ago

@SergeyNekrasoff значит что-то заставляет карту перерисовываться по старым координатам. У вас в коде слишком много всего влияет на карту. Попробуйте сделать с нуля, постепенно добавляя нужный функционал

PNKBizz commented 5 years ago

@SergeyNekrasoff по ссылке https://codesandbox.io/s/codesandbox-nuxt-1ht4k кластеры центрируются ок

SergeyNekrasoff commented 5 years ago

@PNKBizz, короче это проблема не в картах, а в том что компонент карт у меня дочерний компонент, и при отправке запроса - карта перерисовывается и центрируется, поэтому сорри))