Клуб API Карт

input в placemark Layout

Пост в архиве.

Здача. Дать пользователю возможность указать описание у точки.

Делаю следующее:

 

 var myPlacemarkLayout = ymaps.templateLayoutFactory.createClass(
                '<div class="userPlacemarkElement">' +
                    '<div class="userPlacemarkElementWrap">' +
                        '<input name="description"/>' +
                    '</div>' +
                '</div>'
                , {
            build: function() {
                this.constructor.superclass.build.call(this);
                var self = this, parent = this.getParentElement(), elem = $(parent).find('.iconLayoutElement');
                this._element = $('.userPlacemarkElement', this.getParentElement());
                var coords = this.getClientBounds();
                var offset = [-1 * (parseInt(coords[1][0])) / 2, -1 * (parseInt(coords[1][1])) - 15];                          
                elem.css({
                    'position': 'relative',
                    'marginLeft': offset[0] + 'px',
                    'marginTop': offset[1] + 'px'
                });
            },
            getClientBounds: function() {
                var position = this._element.position();
                return [
                    [position.left, position.top], [
                        position.left + this._element[0].offsetWidth,
                        position.top + this._element[0].offsetHeight
                    ]
                ];
            }
        });
        
        
        ymaps.layout.storage.add('my#userPlacemark', myPlacemarkLayout);
        
        var pm = new ymaps.Placemark(coords, {}, {           
            iconLayout: 'my#userPlacemark',
            draggable: true
        });

 

 

В input ничего не возможно ввести. В каком направлении рыть?

18 комментариев

а этот пример не смотрели? http://api.yandex.ru/maps/jsbox/geoobject_contextmenu

не совсем то, но похоже

Смотрел. Там форма лежит рядом с картой и позиционируется относительно placemark. А нужно вводить текст в input на самой иконке.

 

http://api.yandex.ru/maps/jsbox/geoobject_contextmenu буду использовать - если решение так и не найду.

Всеволод Шмыров
28 января 2016, 00:27
Добрый день!
В версии 2.1 иконки геообъектов были перенесены под слой событий.
Можно перенести иконки над слой событий при помощи опции pane равной overlaps
http://api.yandex.ru/maps/doc/jsapi/beta/ref/reference/map.pane.Manager.xml (по умолчанию у геообъектов слой places).

А какую именно задачу вы решаете? Формы ввода должны постоянно отображаться на карте? Обычно для подобных задач (ввод описания точки) используют балун.

Использую верисю 2.0

Задача: позволить пользователю указать точки на карте и сделать к ним описание. Точек может быть сразу несколько. Например:

1. дом

2. спорт зал

и т. д.

А одновременно 2 открытых балуна не может быть.

Всеволод Шмыров
28 января 2016, 00:27
Ну тогда через опцию pane: "overlaps"

Есть ссолчка на пример?

Всеволод Шмыров
28 января 2016, 00:27
Конкретно такого примера нет, но это просто

var pm = new ymaps.Placemark(coords, {}, {           
            iconLayout: 'my#userPlacemark',
            draggable: true,
            pane: 'overlaps'
        });

http://api.yandex.ru/maps/doc/jsapi/beta/ref/reference/GeoObject.xml#param-options.pane
http://api.yandex.ru/maps/doc/jsapi/beta/ref/reference/map.pane.Manager.xml

если добавляю
pane: 'overlaps'

получаю

TypeError: t is not a constructor

Всеволод Шмыров
28 января 2016, 00:27
Можете скинуть ссылку?

нет =(

могу полный код привести:

подключаю

http://api-maps.yandex.ru/2.0-stable/?load=package.full&lang=ru-RU

 

 

var map;

ymaps.ready(function() {

   map = new ymaps.Map("map-user", {
                center: [55.753585, 37.620905],
                zoom: 15
   });

});

map.controls.add("mapTools").add("zoomControl");

 

$('a#add-user-point').live('click', function(e) {
    e.preventDefault();  
   
    if (map) {       
        var coords = map.getCenter();
       
        var myPlacemarkLayout = ymaps.templateLayoutFactory.createClass(
                '' +
                    '' +
                        '' +
                    '' +
                ''
                , {
            build: function() {
                this.constructor.superclass.build.call(this);
                var self = this, parent = this.getParentElement(), elem = $(parent).find('.iconLayoutElement');
                this._element = $('.userPlacemarkElement', this.getParentElement());
                var coords = this.getClientBounds();
                var offset = [-1 * (parseInt(coords[1][0])) / 2, -1 * (parseInt(coords[1][1])) - 15];                         
                elem.css({
                    'position': 'relative',
                    'marginLeft': offset[0] + 'px',
                    'marginTop': offset[1] + 'px'
                });
            },
            getClientBounds: function() {
                var position = this._element.position();
                return [
                    [position.left, position.top], [
                        position.left + this._element[0].offsetWidth,
                        position.top + this._element[0].offsetHeight
                    ]
                ];
            }
        });
       
       
        ymaps.layout.storage.add('my#userPlacemark', myPlacemarkLayout);
       
        var pm = new ymaps.Placemark(coords, {}, {          
            iconLayout: 'my#userPlacemark'
            ,draggable: true
            ,pane: 'overlaps' 
        });
        map.events.add('click', function(e) {
            var clickCoords = e.get('coordPosition');
            pm.geometry.setCoordinates([clickCoords[0], clickCoords[1]]);
        });
        map.geoObjects.add(pm);       
    }
});

не надо код

выложите на jsfiddle.net

Всеволод Шмыров
28 января 2016, 00:27
Простите, я думал, что вы подключаете версию 2.1.
Будет разбираться, что не работает. В версии 2.0 геообъекты над слоем событий.
А что именно не получается? input не выделяется по клику?

http://jsfiddle.net/Jy3ZB/2/

 

Попробуйте вписать текст в input

Всеволод Шмыров
28 января 2016, 00:27
Спасибо за сообщение!
Мы поправим этот баг в следующем релизе. Сейчас как временное решение могу предложить по событию click геообъекта программно выделять форму ввода. Примерно так:

placemark.events.add('click', function (event) {
    var target = event.get('domEvent').get('target');
    if (target.tagName && target.tagName.toLowerCase() == 'input') {
        target.focus();
    }
});

map.events.add('click', function (event) {
    if (document.activeElement) {
        document.activeElement.blur();
    }
});

Или через jQuery слушать click на всех input внутри контейнера карты

$('#map').delegate('input', 'click', function (event) {
   event.target.focus();
});

Спасибо.