Как добавить текстовый блок на Circle в yandex maps?

подпись в нижней позиции окружности

Возможно ли реализовать подпись (1км, 2км) внутри окружности как на скриншоте ?


Ответы (1 шт):

Автор решения: YaCor'

Можно создать кастомные метки со смещением от центра окружности, найденном методом solveDirectProblem.

Для центра окружностей coords нужно определить смещение:

var startPoint = coords;
var azimuth = Math.PI;
var direction = [Math.cos(azimuth), Math.sin(azimuth)];
var coords1km = ymaps.coordSystem.geo.solveDirectProblem(startPoint, direction, 1000).endPoint;
var coords2km = ymaps.coordSystem.geo.solveDirectProblem(startPoint, direction, 2000).endPoint;

Создать шаблоны для кастомных CSS-меток:

var squareLayout1 = ymaps.templateLayoutFactory.createClass('<div class="placemark_layout_container"><div class="square_layout">1км</div></div>');

...и оформить стиль:

.placemark_layout_container {
    position: relative;
    font-size: 13px;
    text-align: center;
}

/* Квадратный макет метки */
.square_layout {
    position: absolute;
    left: -10px;
    top: -15px;
    color: black;
}

Ну и добавить метки в вычисленные координаты:

var squarePlacemark1 = new ymaps.Placemark(
    coords1km, {}, {iconLayout: squareLayout1});
var squarePlacemark2 = new ymaps.Placemark(
    coords2km, {}, {iconLayout: squareLayout2});
myMap.geoObjects.add(squarePlacemark1).add(squarePlacemark2);

Рабочий вариант на фиддле: https://jsfiddle.net/Coroner1st/d3rx5qo0/17/

→ Ссылка