0

На карте установлены метки картинками

            var map = new ymaps.Map('map', {
                center: [centerCoord[0], centerCoord[1]],
                zoom: 3,
                type: null,
                controls: ['zoomControl']
            }, {
                minZoom: 3,
            });
            map.controls.get('zoomControl').options.set({
                size: 'small'
            });

 myPlacemark = new ymaps.Placemark([projCoord[0], projCoord[1]], {
                            hintContent: allProjects[key]['ourprojects_title'],
                            balloonContent: allProjects[key]['ourprojects_adres']
                        }, {
                            iconLayout: 'default#image',
                            iconImageHref: '/images/logo.png',
                            iconImageSize: [12, 12],
                            iconImageOffset: [-5, -10]
                        });
map.geoObjects.add(myPlacemark)

Как сделать чтобы при приближении карты размер иконок увеличивался? Сейчас при зуме они всегда остаются размером 12, а нужно например, чтобы на каждое увеличение зума размер иконок увеличивался на 1

2 ответа 2

1

Я нашел для себя решение, может быть кому то в будущем пригодится. Я получаю метки вот в такую переменную:

var myPlacemark = {
                    type: 'FeatureCollection',
                    features: [{
                            type: 'Feature',
                            id: allProjects[key]['ourprojects_id'],
                            geometry: {
                                type: 'Point',
                                coordinates: [projCoord[0], projCoord[1]]
                            },
                            properties: {
                                hintContent: allProjects[key]['ourprojects_title'],
                                balloonContent: allProjects[key]['ourprojects_adres']
                            },
                            options: {
                                iconLayout: 'default#image',
                                iconImageHref: '/images/logo.png',
                                iconImageSize: [14, 14],
                                iconImageOffset: [-5, -10]
                            }
                        }, //и т.д. ...]
                };

После чего добавляю их на карту через ObjectManager:

var om = new ymaps.ObjectManager({
                    clusterize: false,
                    gridSize: 32,
                    clusterDisableClickZoom: false
                });
                om.add(myPlacemark.features);
                map.geoObjects.add(om);

Дальше на карту вешается событие зума и выполняется функция scaleSizeWithZoom, где идет перебор объектов и изменяется их размер в зависимости от зума:

function scaleSizeWithZoom(e) {
                    size = map.getZoom()
                    om.objects.each(function(object) {
                        om.objects.setObjectOptions(object.id, {
                            iconImageSize: [size * 6, size * 6]
                        });
                    })
                }

                map.events.add('boundschange', scaleSizeWithZoom);
0

В примерах Яндекса есть подходящий вариант - Настройка размера метки на разных зумах. Если у вас обычная метка, то надо завязаться на размер зума через множитель, например. Изменять можно отслеживая изменение карты. Не забудьте добавить офсет, если он нужен:

myMap.events.add('boundschange', function () {
    size = myMap.getZoom()
    myPlacemark.options.set("iconImageSize", [size*6, size*8])
    myPlacemark.options.set("iconImageOffset", [-size*3, -size*4])
});
2
  • Спасибо, этот вариант работает для одной метки. А если у меня много меток на карте и я добавляю их через ObjectManager? 12 сен 2022 в 6:11
  • 1
    Сделал решение для OM :) Спасибо, ваш ответ подтолкнул меня на правильное решение 12 сен 2022 в 6:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.