Метка

Open in CodeSandbox

Метка может быть создана двумя способами: с помощью класса GeoObject с указанным типом геометрии "точка" либо с помощью вспомогательного класса Placemark.

При создании метки нужно указать координаты соответствущей точки. Также метке можно задать её свойства (например, текст значка) и опции (например, изображение значка). 

<!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.0/?load=package.standard,package.geoObjects&amp;lang=ru-RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>

        <script src="placemark.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="map" style="width:400px; height:300px"></div>
    </body>
</html>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
            center: [55.76, 37.64],
            zoom: 10,
        }),
        // Создаем геообъект с типом геометрии "Точка".
        myGeoObject = new ymaps.GeoObject(
            {
                // Описание геометрии.
                geometry: {
                    type: "Point",
                    coordinates: [55.8, 37.8],
                },
                // Свойства.
                properties: {
                    // Контент метки.
                    iconContent: "Метка",
                    balloonContent: "Меня можно перемещать",
                },
            },
            {
                // Опции.
                // Иконка метки будет растягиваться под размер ее содержимого.
                preset: "twirl#redStretchyIcon",
                // Метку можно перемещать.
                draggable: true,
            }
        ),
        // Создаем метку с помощью вспомогательного класса.
        myPlacemark1 = new ymaps.Placemark(
            [55.8, 37.6],
            {
                // Свойства.
                // Содержимое иконки, балуна и хинта.
                iconContent: "1",
                balloonContent: "Балун",
                hintContent: "Стандартный значок метки",
            },
            {
                // Опции.
                // Стандартная фиолетовая иконка.
                preset: "twirl#violetIcon",
            }
        ),
        myPlacemark2 = new ymaps.Placemark(
            [55.76, 37.56],
            {
                // Свойства.
                hintContent: "Собственный значок метки",
            },
            {
                // Опции.
                // Своё изображение иконки метки.
                iconImageHref: "pin.svg",
                // Размеры метки.
                iconImageSize: [48, 48],
                // Смещение левого верхнего угла иконки относительно
                // её "ножки" (точки привязки).
                iconImageOffset: [-5, -45],
            }
        );

    // Добавляем все метки на карту.
    myMap.geoObjects.add(myPlacemark1).add(myPlacemark2).add(myGeoObject);
}