Клуб API Карт

Клуб API Карт

Интерактивная метка Placemark

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

Доброго времени суток!

 

Хочу добавить свою метку и вызывать ее при клике на карту. На метку приходят текущие координаты мыши.

С добавлением метки проблем не возникло, но вот вопрос, метка у меня не простая. Сама метка - это input, который стилизуется скриптом, вида http://anthonyterrien.com/knob/ . т.е. при клике должна появляться окружность с полем ввода, куда я ввожу значение, и она закрашивается на это значение.

Сама окружность появляется, но input не активен (не могу ввести число) Я так понимаю дело в фокусе, т.к. он видимо постоянно висит на карте. Пробовал метку воткнуть в балун (там инпут работает), но по логике балун может быть только один на карту, и вновь открывшийся закрывает предыдущий открытый, что меня не устраивает. 

3 комментария
Авторизуйтесь, чтобы оставить комментарий
dimik
27 января 2016, 22:14

Добавьте метке опцию pane: 'overlaps'

rudnev.kostya.web
27 января 2016, 22:14

Спасибо! Буду пробовать! Вроде сделал на костыле, повесил событие на клик по метке.

При клике фокус переходит на input. Только вот теперь разобраться бы, как их редактировать, т.к. добавив с десяток меток, менять значение в input(е) я могу только у последнего добавленного.  

rudnev.kostya.web
27 января 2016, 22:14

Не получается. Я видимо наколхозил так, что ужас. 

Код представлен ниже. В конце скрипта бросаю фокус input. При добавлении метки работает ок, но если я хочу поменять значение уже у существующей метки, то не выходит, focus висит на последнем добавленном input(е).

 

 

ymaps.ready(init);

  var myMap;

 

  function init() {

    myMap = new ymaps.Map("map", {

      center: [55.76, 37.64],

      zoom: 7,

    });

 

    myMap.events.add('click', function(e) {

      // Получение координат щелчка

      var coords = e.get('coords');

      coord1 = coords[0].toFixed(2);

      coord2 = coords[1].toFixed(2);

 

 

      var squareLayout = ymaps.templateLayoutFactory.createClass('');

      //Содержимое фигуры

 

      var squarePlacemark = new ymaps.Placemark(

        //Создаем метку

        [coord1, coord2], {

          hintContent: 'My placemark'

        },

 

        {

          iconLayout: squareLayout,

          // Описываем фигуру активной области "Прямоугольник".

          iconShape: {

            type: 'Circle',

            // Круг описывается в виде центра и радиуса

            coordinates: [50, 50],

            radius: 50

          }

        }

      );

 

      myMap.geoObjects.add(squarePlacemark); //Добавляется марка

 

      setTimeout(function() {

        $(".knob").knob()

      }, 120); //Вывод круга

 

      squarePlacemark.events.add('click', function(e) {

        $(".knob").focus(); // Фокус на input

      });

 

    });

 

  }