1

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

res.geoObjects.each(function (item) {
    console.log(item.geometry.getCoordinates());
    if (item.getPremiseNumber()) {
        var tempPlacemark = new ymaps.Placemark(item.geometry.getCoordinates(), {balloonContent: item.getAddressLine() + '<br><button class="btn btn-secondary btn-sm mt-1" onclick="getAddress(\'' + item.geometry.getCoordinates() + '\')">выбрать</button>'})
    } else {
        var tempPlacemark = new ymaps.Placemark(item.geometry.getCoordinates(), {balloonContent: item.getAddressLine()})
    }
    searchCollection.add(tempPlacemark);
});

2
  • Соберите полный пример, где не работает желаемое поведение. В таком описании непонятно, что за кнопка в балуне, какую карту нужно создать и т.д.
    – Reni
    Commented 28 апр. 2018 в 13:19
  • jsfiddle.net/alexeilavrov/29115a65/1 - Вот так получается. Commented 8 мая 2018 в 8:13

1 ответ 1

1

Вам нужно сделать свой макет кнопки, как показано в примере.

С помощью макета вы сможете добавить кнопку в балун объекта. По клику на кнопке можно выполнять любой нужный вам код, например, убирать все метки с карты кроме выбранной.

В примере ниже добавлен макет для красной метки.

ymaps.ready(init);

function init() {
  var map = new ymaps.Map('map', {
      center: [55.7783, 38.0489],
      zoom: 9,
      controls: []
    }, {
      searchControlProvider: 'yandex#search'
    }),

    BalloonContentLayout = ymaps.templateLayoutFactory.createClass(
      '<div style="margin: 10px;">' +
      '<b>{{properties.name}}</b><br />' +
      '<button id="my-button"> Выбрать </button>' +
      '</div>', {

        build: function() {
          BalloonContentLayout.superclass.build.call(this);
          $('#my-button').bind('click', this.myButtonClick);
        },

        clear: function() {
          $('#my-button').unbind('click', this.myButtonClick);
          BalloonContentLayout.superclass.clear.call(this);
        },

        myButtonClick: function() {
          var pos = placemark.geometry.getCoordinates();
          //alert(pos);
          map.geoObjects.removeAll();
          map.geoObjects.add(placemark);
          map.setCenter(pos);
          map.setZoom(pos, {
            checkZoomRange: true
          })

        }
      });

  var placemark = new ymaps.Placemark([55.694843, 37.435023], {
    name: 'Открыть карту с меткой',
    iconCaption: 'Я - метка с кнопкой'
  }, {
    balloonContentLayout: BalloonContentLayout,
    balloonPanelMaxMapArea: 0,
    preset: 'islands#redDotIconWithCaption'
  });

  map.geoObjects.add(placemark)
    .add(new ymaps.Placemark([55.684758, 37.738521], {
      balloonContent: 'цвет <strong>воды пляжа бонди</strong>'
    }, {
      preset: 'islands#icon',
      iconColor: '#0095b6'
    }))
    .add(new ymaps.Placemark([55.833436, 37.715175], {
      balloonContent: '<strong>серобуромалиновый</strong> цвет'
    }, {
      preset: 'islands#dotIcon',
      iconColor: '#735184'
    }));
}
html,
body,
#map {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script type="text/javascript" src="https://yandex.st/jquery/2.2.3/jquery.min.js"></script>
<div id="map"></div>

0

Ваш ответ

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

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