S
S
sabanovvv2014-11-25 15:24:57
JavaScript
sabanovvv, 2014-11-25 15:24:57

How to make a Yandex map balloon open by default?

uni.webj.esy.es I
display marks on the Yandex map. I need to make one specific balloon open when loading the site, how to do this?
ps Yandex map api did not find the necessary information for
the map js code

function init () {
    // Создание экземпляра карты и его привязка к контейнеру с
    // заданным id ("map")
    var myMap = new ymaps.Map('map2', {
        // При инициализации карты, обязательно нужно указать
        // ее центр и коэффициент масштабирования
        center: [56.317222,44.002149],
        zoom: 4
    });
    //Добавляем элементы управления
    myMap.controls.add('smallZoomControl', {
        left: 15,
        top: 15
    })
    myMap.behaviors.enable('scrollZoom');
    myPlacemarkOpera = new ymaps.Placemark([55.851209,37.541246], {
        name: 'Адрес: ООО ЛАНИКС M',
        address: '125438 г. Москва, ул. Лихоборская набережная, д. 18, стр. 1',
        telefon: 'Тел.: +7 (495) 726-57-07, +7 (495) 726-57-10',
        faks: 'Факс: +7 (499) 153-76-31'
    }),

        myPlacemarkDramma = new ymaps.Placemark([59.9174455,30.3250575], {
            name: 'Адрес: ООО ЛАНИКС M',
            address: '125438 г. Санкт-Петербург',
            telefon: 'Тел.: +7 (495) 726-57-07, +7 (495) 726-57-10',
            faks: 'Факс: +7 (499) 153-76-31'
        }),

        myPlacemarkKomedia = new ymaps.Placemark([53.8838884,27.594974], {
            name: 'Адрес: ООО ЛАНИКС M',
            address: '125438 г. Минск',
            telefon: 'Тел.: +7 (495) 726-57-07, +7 (495) 726-57-10',
            faks: 'Факс: +7 (499) 153-76-31'

        }),

        // Создаем коллекцию, в которую будем добавлять метки
        myCollection = new ymaps.GeoObjectCollection();

    //Добавляем метки в коллекцию геообъектов.
    myCollection
        .add(myPlacemarkOpera)
        .add(myPlacemarkDramma)
        .add(myPlacemarkKomedia);

    // Создаем шаблон для отображения контента балуна
    var myBalloonLayout = ymaps.templateLayoutFactory.createClass(
        '<div class="sd1"><p>$[properties.name]</p></div>' +
        '<div class="sd2"><p>$[properties.address]</p></div>' +
        '<div class="sd3"><p>$[properties.telefon]</p></div>' +
        '<div class="sd4"><p>$[properties.faks]</p></div>'
    );
    // Помещаем созданный шаблон в хранилище шаблонов. Теперь наш шаблон доступен по ключу 'my#theaterlayout'.
    ymaps.layout.storage.add('my#theaterlayout', myBalloonLayout);
    // Задаем наш шаблон для балунов геобъектов коллекции.
    myCollection.options.set({
        balloonContentBodyLayout:'my#theaterlayout',
        // Максимальная ширина балуна в пикселах
        balloonMaxWidth: 380
    });
    // Добавляем коллекцию геообъектов на карту.
    myMap.geoObjects.add(myCollection);
}

Answer the question

In order to leave comments, you need to log in

2 answer(s)
D
Dmitry Entelis, 2014-11-25
@sabanovvv

myPlacemark.balloon.open();
https://tech.yandex.ru/maps/jsbox/2.1/balloon_out_...

V
vitalso78, 2018-03-31
@vitalso78

It is not possible to set the width of the balloon itself in the open window by default here

var myMap;

ymaps.ready(function () {
    myMap = new ymaps.Map('map', {
        zoom: 15,
        center: [53.21402707119357,50.22476249999997],
        controls: []
    }, {
        searchControlProvider: 'yandex#search'
    });
    var myPlacemark = new ymaps.Placemark([53.21402707119357,50.22476249999997], {
        balloonContentHeader: 'Компания «UVEB.RU» <img  width = "200" height ="100" src="http://www.uveb.ru/UVEB.RU.png" alt="" />',
                    balloonContentBody: 'Россия, Самара, ул. 22 Партсъезда, 46,<br>строение 10, 1 этаж, оф.№ 4<br> [email protected]',
                    balloonContentFooter: '+7 (927) 737 61-69'
    }, {
        balloonPanelMaxMapArea: 0,
        
    });
    myMap.geoObjects.add(myPlacemark);
   
    observeEvents(myMap);
    
    myPlacemark.balloon.open();
});

function observeEvents (map) {
    var mapEventsGroup;
    map.geoObjects.each(function (geoObject) {
        geoObject.balloon.events
            // При открытии балуна начинаем слушать изменение центра карты.
            .add('open', function (e1) {
                var placemark = e1.get('target');
                // Вызываем функцию в двух случаях:
                mapEventsGroup = map.events.group()
                    // 1) в начале движения (если балун во внешнем контейнере);
                    .add('actiontick', function (e2) {
                        if (placemark.options.get('balloonPane') == 'outerBalloon') {
                            setBalloonPane(map, placemark, e2.get('tick'));
                        }
                    })
                    // 2) в конце движения (если балун во внутреннем контейнере).
                    .add('actiontickcomplete', function (e2) {
                        if (placemark.options.get('balloonPane') != 'outerBalloon') {
                            setBalloonPane(map, placemark, e2.get('tick'));
                        }
                    });
                // Вызываем функцию сразу после открытия.
                setBalloonPane(map, placemark);
            })
            // При закрытии балуна удаляем слушатели.
            .add('close', function () {
                mapEventsGroup.removeAll();
            });
    });
}

function setBalloonPane (map, placemark, mapData) {
    mapData = mapData || {
        globalPixelCenter: map.getGlobalPixelCenter(),
        zoom: map.getZoom()
    };

    var mapSize = map.container.getSize(),
        mapBounds = [
            [mapData.globalPixelCenter[0] - mapSize[0] / 2, mapData.globalPixelCenter[1] - mapSize[1] / 2],
            [mapData.globalPixelCenter[0] + mapSize[0] / 2, mapData.globalPixelCenter[1] + mapSize[1] / 2]
        ],
        balloonPosition = placemark.balloon.getPosition(),
    // Используется при изменении зума.
        zoomFactor = Math.pow(2, mapData.zoom - map.getZoom()),
    // Определяем, попадает ли точка привязки балуна в видимую область карты.
        pointInBounds = ymaps.util.pixelBounds.containsPoint(mapBounds, [
            balloonPosition[0] * zoomFactor,
            balloonPosition[1] * zoomFactor
        ]),
        isInOutersPane = placemark.options.get('balloonPane') == 'outerBalloon';

    // Если точка привязки не попадает в видимую область карты, переносим балун во внутренний контейнер
    if (!pointInBounds && isInOutersPane) {
        placemark.options.set({
            balloonPane: 'balloon',
            balloonShadowPane: 'shadows'
        });
        // и наоборот.
    } else if (pointInBounds && !isInOutersPane) {
        placemark.options.set({
            balloonPane: 'outerBalloon',
            balloonShadowPane: 'outerBalloon'
           
        });
    }
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question