Как добавить текстовый блок на Circle в yandex maps?
Ответы (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/
