Макет хинта метки

Open in CodeSandbox

Макеты объектов можно создавать с помощью фабрики templateLayoutFactory, используя текстовые шаблоны.

В данном примере создается пользовательский макет хинта геообъекта. Макет задается геообъекту через опции.

Для того чтобы хинт автоматически сдвигал свою позицию в случае выхода за пределы контейнера карты, необходимо в его макете переопределить метод getShape(). Данный метод должен возвращать текущие размеры макета хинта.

<!DOCTYPE html>

<html>
    <head>
        <title>Макет хинта метки</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script
            src="placemark_hint_layout.js"
            type="text/javascript"
        ></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
            .my-hint {
                display: inline-block;
                padding: 5px;
                height: 35px;
                position: relative;
                left: -10px;
                width: 195px;
                font-size: 11px;
                line-height: 17px;
                color: #333333;
                text-align: center;
                vertical-align: middle;
                background-color: #faefb6;
                border: 1px solid #cdb7b5;
                border-radius: 20px;
                font-family: Arial;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map(
            "map",
            {
                center: [55.76, 37.64],
                zoom: 10,
            },
            {
                searchControlProvider: "yandex#search",
            }
        ),
        // Создание макета содержимого хинта.
        // Макет создается через фабрику макетов с помощью текстового шаблона.
        HintLayout = ymaps.templateLayoutFactory.createClass(
            "<div class='my-hint'>" +
                "<b>{{ properties.object }}</b><br />" +
                "{{ properties.address }}" +
                "</div>",
            {
                // Определяем метод getShape, который
                // будет возвращать размеры макета хинта.
                // Это необходимо для того, чтобы хинт автоматически
                // сдвигал позицию при выходе за пределы карты.
                getShape: function () {
                    var el = this.getElement(),
                        result = null;
                    if (el) {
                        var firstChild = el.firstChild;
                        result = new ymaps.shape.Rectangle(
                            new ymaps.geometry.pixel.Rectangle([
                                [0, 0],
                                [
                                    firstChild.offsetWidth,
                                    firstChild.offsetHeight,
                                ],
                            ])
                        );
                    }
                    return result;
                },
            }
        );

    var myPlacemark = new ymaps.Placemark(
        [55.764286, 37.581408],
        {
            address: "Москва, ул. Зоологическая, 13, стр. 2",
            object: "Центр современного искусства",
        },
        {
            hintLayout: HintLayout,
        }
    );

    myMap.geoObjects.add(myPlacemark);
}