Справочники, инструменты, документация

Яндекс Карты, метки и балуны

В этой статей мы посмотрим как создавать метки на карте по заданным координатам или адресу (например, адресу дома), как к этим меткам привязывать балуны или располагать балуны независимо от маркеров. Мы так же рассмотрим как использовать возможности некоторых модулей API Яндекс.Карт и с их помощью настраивать внешний вид меток и балунов.

В начале подключение скрипта и инициализация:

<div id="map" style="width: 100%; height: 400px;"></div>    

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);      
function init() {
    var myMap = new ymaps.Map("map", {
        center: [55.76, 37.64],
        zoom: 10
    }, {
        searchControlProvider: 'yandex#search'
    });

    // Вывод меток...
}
</script>

Метка с точкой

По координатам:

var myPlacemark = new ymaps.Placemark([55.85,37.45], null, {
    preset: 'islands#blueDotIcon'
});
myMap.geoObjects.add(myPlacemark);

По адресу:

ymaps.geocode("г.Москва, Химкинский бульвар, д.5").then(function (res) {
    var coord = res.geoObjects.get(0).geometry.getCoordinates();
    var myPlacemark = new ymaps.Placemark(coord, null, {
        preset: 'islands#blueDotIcon'
    });
    myMap.geoObjects.add(myPlacemark);
});

Цвета меток:

  • islands#blueDotIcon
  • islands#darkGreenDotIcon
  • islands#redDotIcon
  • islands#darkOrangeDotIcon
  • islands#blackDotIcon
  • islands#nightDotIcon
  • islands#yellowDotIcon
  • islands#darkBlueDotIcon
  • islands#greenDotIcon
  • islands#pinkDotIcon
  • islands#orangeDotIcon
  • islands#grayDotIcon
  • islands#lightBlueDotIcon
  • islands#brownDotIcon
  • islands#oliveDotIcon

Круглая метка с точкой

По координатам:

var myPlacemark = new ymaps.Placemark([55.86,37.59], null, {
    preset: 'islands#greenCircleDotIcon'
});
myMap.geoObjects.add(myPlacemark);

По адресу:

ymaps.geocode("г.Москва, Каргопольская, д.18").then(function (res) {
    var coord = res.geoObjects.get(0).geometry.getCoordinates();
    var myPlacemark = new ymaps.Placemark(coord, null, {
        preset: 'islands#greenCircleDotIcon'
    });
    myMap.geoObjects.add(myPlacemark);
});

Цвета меток:

  • islands#blueCircleDotIcon
  • islands#darkGreenCircleDotIcon
  • islands#redCircleDotIcon
  • islands#violetCircleDotIcon
  • islands#darkOrangeCircleDotIcon
  • islands#blackCircleDotIcon
  • islands#nightCircleDotIcon
  • islands#yellowCircleDotIcon
  • islands#darkBlueCircleDotIcon
  • islands#greenCircleDotIcon
  • islands#pinkCircleDotIcon
  • islands#orangeCircleDotIcon
  • islands#grayCircleDotIcon
  • islands#lightBlueCircleDotIcon
  • islands#brownCircleDotIcon
  • islands#oliveCircleDotIcon

Метка с нумерацией

По координатам:

var myPlacemark = new ymaps.Placemark([55.85,37.7], {
    iconContent: '1'
}, {
    preset: 'islands#redIcon'
});
myMap.geoObjects.add(myPlacemark); 

По адресу:

ymaps.geocode("г. Москва, Большой Лосиноостровский пруд").then(function (res) {
    var coord = res.geoObjects.get(0).geometry.getCoordinates();
    var myPlacemark = new ymaps.Placemark(coord, {
        iconContent: '1'
    }, {
        preset: 'islands#redIcon'
    });
    myMap.geoObjects.add(myPlacemark);  
}); 

Цвета меток:

  • islands#blueIcon
  • islands#darkGreenIcon
  • islands#redIcon
  • islands#violetIcon
  • islands#darkOrangeIcon
  • islands#blackIcon
  • islands#nightIcon
  • islands#yellowIcon
  • islands#darkBlueIcon
  • islands#greenIcon
  • islands#pinkIcon
  • islands#orangeIcon
  • islands#grayIcon
  • islands#lightBlueIcon
  • islands#brownIcon
  • islands#oliveIcon

Круглые метки с нумерацией:

  • islands#blueCircleIcon
  • islands#darkGreenCircleIcon
  • islands#redCircleIcon
  • islands#violetCircleIcon
  • islands#darkOrangeCircleIcon
  • islands#blackCircleIcon
  • islands#nightCircleIcon
  • islands#yellowCircleIcon
  • islands#darkBlueCircleIcon
  • islands#greenCircleIcon
  • islands#pinkCircleIcon
  • islands#orangeCircleIcon
  • islands#grayCircleIcon
  • islands#lightBlueCircleIcon
  • islands#brownCircleIcon
  • islands#oliveCircleIcon

Метка с текстом

В данном варианте метка тянется по длине текста, переносы строк не поддерживаются.

По координатам:

var myPlacemark = new ymaps.Placemark([55.75,37.45], {
    iconContent: 'текст'
}, {
    preset: 'islands#darkOrangeStretchyIcon'
});
myMap.geoObjects.add(myPlacemark);

По адресу:

ymaps.geocode("г.Москва, Нижние Мневники").then(function (res) {
    var coord = res.geoObjects.get(0).geometry.getCoordinates();
    var myPlacemark = new ymaps.Placemark(coord, {
        iconContent: 'текст'
    }, {
        preset: 'islands#darkOrangeStretchyIcon'
    });
    myMap.geoObjects.add(myPlacemark);      
});

Цвета меток:

  • islands#blueStretchyIcon
  • islands#darkGreenStretchyIcon
  • islands#redStretchyIcon
  • islands#violetStretchyIcon
  • islands#darkOrangeStretchyIcon
  • islands#blackStretchyIcon
  • islands#nightStretchyIcon
  • islands#yellowStretchyIcon
  • islands#darkBlueStretchyIcon
  • islands#greenStretchyIcon
  • islands#pinkStretchyIcon
  • islands#orangeStretchyIcon
  • islands#grayStretchyIcon
  • islands#lightBlueStretchyIcon
  • islands#brownStretchyIcon
  • islands#oliveStretchyIcon

Метка с подсказкой

По координатам:

var myPlacemark = new ymaps.Placemark([55.75,37.59], {
    iconCaption: 'подсказка'
}, {
    preset: 'islands#pinkDotIcon'
});
myMap.geoObjects.add(myPlacemark);

По адресу:

ymaps.geocode("г. Москва, Большой Николаевский пер.").then(function (res) {
    var coord = res.geoObjects.get(0).geometry.getCoordinates();
    var myPlacemark = new ymaps.Placemark(coord, {
        iconCaption: 'подсказка'
    }, {
        preset: 'islands#pinkDotIcon'
    });
    myMap.geoObjects.add(myPlacemark); 
}); 

Цвета как у меток с точкой.

Метка со своей картинкой

В место метки можно использовать свою картинку, для этого заполняются следующие параметры:

  • iconLayout - Значение default#image или default#imageWithContent
  • iconImageHref - URL файла
  • iconImageSize - Ширина и высота изображения
  • iconImageOffset - Сдвиг изображения
  • iconContentOffset - Сдвиг изображения для меток с текстом

По координатам:

var myPlacemark = new ymaps.Placemark([55.75,37.75], null,{
    iconLayout: 'default#image',
    iconImageHref: "/map.png",
    iconImageSize: [30, 44],
    iconImageOffset: [-15, -44]
});
myMap.geoObjects.add(myPlacemark);

По адресу:

ymaps.geocode("г.Москва, ш.Энтузиастов").then(function (res) {
    var coord = res.geoObjects.get(0).geometry.getCoordinates();
    var myPlacemark = new ymaps.Placemark(coord, null,{
        iconLayout: 'default#image',
        iconImageHref: "/map.png",
        iconImageSize: [30, 44],
        iconImageOffset: [-15, -44]
    });
    myMap.geoObjects.add(myPlacemark);
});

Балуны с меткой

По координатам:

var myPlacemark = new ymaps.Placemark([55.65,37.5], {
    balloonContentHeader: "Заголовок",
    balloonContentBody: "Содержимое",
    balloonContentFooter: "Подвал",
    hintContent: "Подсказка"
}, {
    preset: 'islands#yellowDotIcon'
});
myMap.geoObjects.add(myPlacemark);

По адресу:

ymaps.geocode("г.Москва, ул.Миклухо-Маклая").then(function (res) {
    var coord = res.geoObjects.get(0).geometry.getCoordinates();
    var myPlacemark = new ymaps.Placemark(coord, {
        balloonContentHeader: "Заголовок",
        balloonContentBody: "Содержимое",
        balloonContentFooter: "Подвал",
        hintContent: "Подсказка"
    }, {
        preset: 'islands#yellowDotIcon'
    });
    myMap.geoObjects.add(myPlacemark);
});

Балуны без метки

По координатам:

myMap.balloon.open([55.65,37.7], "Содержимое балуна", {
    closeButton: false
});

По адресу:

ymaps.geocode("г.Москва, ул.Шоссейная, д.5").then(function (res) {
    var coord = res.geoObjects.get(0).geometry.getCoordinates();
    myMap.balloon.open(coord, "Содержимое балуна", {
        closeButton: false
    });
});

Метка по адресу со своей иконкой и балуном, карта центрируется по метке

<div id="map" style="width: 100%; height: 400px;"></div>

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);    
function init() {
    var myMap = new ymaps.Map("map", {
        center: [55.76, 37.64],
        zoom: 10
    }, {
        searchControlProvider: 'yandex#search'
    });

    ymaps.geocode("г. Истра, ул. 2-ая Первомайская").then(function (res) {
        var coord = res.geoObjects.get(0).geometry.getCoordinates();
        var myPlacemark = new ymaps.Placemark(coord, {
            balloonContentHeader: 'ООО "Рога и копыта"',
            balloonContentBody: "г. Истра, ул. 2-ая Первомайская",
            balloonContentFooter: "+7 (495) 777-77-77"
        },{
            iconLayout: 'default#image',
            iconImageHref: "/map.png",
            iconImageSize: [30, 44],
            iconImageOffset: [-15, -44]
        });
        myMap.geoObjects.add(myPlacemark);
        myMap.setCenter(coord, 13);
    });
}
</script>

Вывод меток в разных стилях

<div id="map" style="width: 100%; height: 400px;"></div>    

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);      
function init() {
    var myMap = new ymaps.Map("map", {
        center: [55.76, 37.64],
        zoom: 10
    }, {
        searchControlProvider: 'yandex#search'
    });

    // 1. Метка с точкой.
    var myPlacemark = new ymaps.Placemark([55.85,37.45], null, {
        preset: 'islands#blueDotIcon'
    });
    myMap.geoObjects.add(myPlacemark);

    // 2. Круглая метка с точкой.
    var myPlacemark = new ymaps.Placemark([55.86,37.59], null, {
        preset: 'islands#greenCircleDotIcon'
    });
    myMap.geoObjects.add(myPlacemark);

    // 3. Метка с нумерацией.
    var myPlacemark = new ymaps.Placemark([55.85,37.7], {
        iconContent: '1'
    }, {
        preset: 'islands#redIcon'
    });
    myMap.geoObjects.add(myPlacemark);  

    // 4. Метка с текстом.
    var myPlacemark = new ymaps.Placemark([55.75,37.45], {
        iconContent: 'текст'
    }, {
        preset: 'islands#darkOrangeStretchyIcon'
    });
    myMap.geoObjects.add(myPlacemark);      


    // 5. Метка с подсказкой.
    var myPlacemark = new ymaps.Placemark([55.75,37.59], {
        iconCaption: 'подсказка'
    }, {
        preset: 'islands#pinkDotIcon'
    });
    myMap.geoObjects.add(myPlacemark); 

    // 6. Метка со своей картинкой.
    var myPlacemark = new ymaps.Placemark([55.75,37.75], null,{
        iconLayout: 'default#image',
        iconImageHref: "/map.png",
        iconImageSize: [30, 44],
        iconImageOffset: [-15, -44]
    });
    myMap.geoObjects.add(myPlacemark);

    // 7. Балун.
    var myPlacemark = new ymaps.Placemark([55.65,37.5], {
        balloonContentHeader: "Заголовок",
        balloonContentBody: "Содержимое",
        balloonContentFooter: "Подвал",
        hintContent: "Подсказка"
    }, {
        preset: 'islands#yellowDotIcon'
    });
    myMap.geoObjects.add(myPlacemark);

    // 8. Балун без метки.
    myMap.balloon.open([55.65,37.7], "Содержимое балуна", {
        closeButton: false
    });
}
</script>