0

Здравствуйте! Подскажите, пожалуйста, как получить ширину div class="my" с красной рамкой? По умолчанию ширина устанавливается auto. Необходимо это для того, чтобы затем сместить div влево на половину найденной ширины.

https://jsfiddle.net/xhypqwLt/

$('.my').width() возвращает null. Очевидно, этот div еще не загрузился.

И вообще возможно работать со стилями с помощью JQuery?

ymaps.ready(function () {
    var map = new ymaps.Map('map', {
        center: [55.7, 37.6],
        zoom: 10,
        controls: []
    });

    // Создание метки с круглой активной областью.
    
    var circleLayout = ymaps.templateLayoutFactory.createClass('<div class="placemark_layout_container"><div class="my">1.5M</div><div class="circle_layout"></div></div>');

		
    var circlePlacemark = new ymaps.Placemark(
        [55.783202, 37.605584], {
            hintContent: 'Метка с круглым HTML макетом'
        }, {
            iconLayout: circleLayout,
            iconShape: {
                type: 'Circle',
                coordinates: [0, 0],
                radius: 25
            }
        }
    );
	
    map.geoObjects.add(circlePlacemark);
});
html, body, #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        .placemark_layout_container { 
            position: relative;
            font-family: Georgia;
            font-size: 20px;
            text-align: center;
            font-weight: bold;
        }
        
        /* Круглый макет метки */
        .circle_layout {
            background-color: white;
            position: absolute;
            left: -10px;
            top: -10px;
            width: 20px;
            height: 20px;
            border: 2px solid #225D9C;
            color: #225D9C;
            line-height: 46px;
            /* Это CSS свойство не будет работать в Internet Explorer 8 */
            border-radius: 50px;
        }
        
        .my {
          display:block;
          position:absolute;
          width:auto;
          border:2px solid #ff0000;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Пример задания своих HTML макетов меток со своими фигурами активных областей</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- Если вы используете API локально, то в URL ресурса необходимо указывать протокол в стандартном виде (http://...)-->
    <script src="//api-maps.yandex.ru/2.1/?lang=ru-RU" type="text/javascript"></script>
    <script src="placemark_shape.js" type="text/javascript"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>

1 ответ 1

2

Добрый день. Если просто вызывать $('.my') после создания метки, то макета с классом еще действительно не будет. jQuery код можно вызвать после резолва промиса метода getOverlay.

примерно так:

placemark.getOverlay().then(() => {
    $('.my') // ...
});

https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/IGeoObject-docpage/#getOverlay

Но если нужно сделать какую-то логику, которая влияет только непосредственно на макет, то будет правильней при создании макета наследовать метод build и в нем уже описать всю необходимую логику.

Пример использования templateLayoutFactory с jQuery: https://tech.yandex.ru/maps/jsbox/2.1/placemark_balloon_layout

В этом примере создается макет балуна, но принцип тот же.

3
  • По аналогии сделал jsfiddle.net/49sfz0q3/2. Однако, alert($(this).width()) - вызывает ошибку "Cannot read property 'defaultView' of undefined", а alert($('.square_layout').width()) - для все элементов возвращает одну и ту же ширину (полагаю, ширину первого) Commented 19 янв. 2018 в 6:51
  • - this внутри метода build ссылает на экземпляр класса макета, а не на html элемент. У макета есть элемент this.getElement() - alert($('.square_layout').width()) Действительно будет возвращать одну и ту же ширину, так как этот код ищет по всей странице. Надо написать что-то типа $(this.getElement()).find('.square_layout'). То есть искать html-элемент внутри html-элемента макета.
    – vsesh
    Commented 19 янв. 2018 в 7:42
  • Сколько же нюансов... Спасибо за помощь, Всеволод ! Commented 19 янв. 2018 в 7:54

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.